我应该将数据更改代码放在函数中还是仅放在操作中？-PHP中文网问答

我目前正在编写一个公交车时刻表应用程序，它使用对象类型来对时刻表“文档”进行建模。

interface Timetable {
  name: string
  stops: string[]
  services: string[][]
}

除了类型之外，我还有许多函数，如果我要使用突变，我通常会将它们编写为类上的方法。我主要使用 Immer，因此我不必编写大量扩展语法。例如，

const addStop = (timetable: Timetable, stopName: string): Timetable => {
  return produce(timetable, (newTimetable) => {
    newTimetable.stops.push(stopName)
  })
}

为了管理状态，我使用 Zustand 和 Immer，但我觉得如果我使用 Redux，我的问题会是相同的。在我的商店中，我有一个 Timetable 对象数组，以及也使用 Immer 重新分配当前选定的时间表对象的操作：

        updateTt: (tt, index) => {
          set((state) => {
            state.timetables[index] = tt
          })
        },
        updateThisTt: (timetable) => {
          set((s) => {
            if (s.selectedTtIdx === null) {
              throw new Error("no selected timetable")
            }
            s.timetables[s.selectedTtIdx] = timetable
          })
        },

然后我在 React 组件中调用数据更改函数，并调用更新操作：

const onAddStop = (name) => {
  updateThisTt(addStop(timetable, name))
}

这可行，但我不确定我做得是否正确。我现在有两层 Immer 调用，我的组件现在有直接在其事件处理程序中调用的数据修改函数，而且我不太喜欢“方法”的外观，即使从总体来看，这是一个小错误。

我考虑过：

将所有数据修改转化为操作。这看起来会更难维护，也更难理解，因为在索引商店的对象数组方面有很多重复。
为每个数据修改函数创建一个操作；然后，从我的事件处理程序调用这些操作。这似乎会造成一些重复，即使只是在名称方面。
将我的 Timetable 类型转换为一个类，将数据修改函数重写为变异方法，并设置 [immerable] = true 并让 Immer 完成所有工作我的行动。我已经这样做了，但我宁愿坚持不可变的记录模式。

就其价值而言，Flux、Zustand 或 Immer 的文档往往会显示第一个选项，而且只是偶尔出现；没有哪个应用程序像 counter = counter + 1 那样简单。对于使用 Flux 架构的应用程序，构建它的最佳方法是什么？