reactjs - 我应该在哪里添加代码来运行附加到 Redux 状态的副作用？

Question

我正在使用 Electron、React 和 Redux 构建一个桌面应用程序。

这个桌面应用程序的关键组件之一是将我的 redux 状态的某些组件绑定(bind)到驱动器上的物理文件。该网站是用户是否可以访问某些数据的“主”副本。该应用程序下载它应该有权访问的文件列表，然后跟踪哪些文件已经下载。一个典型的工作流程是加载列表，然后点击“下载”，当项目被下载后，在应用程序中使用它。

当我更新本地 redux 项目列表时，我还需要管理这些文件的状态。当从 redux 存储中删除记录时，我需要删除关联的物理文件。

这让我进入了一个奇怪的空间。编写一个对本地文件结构进行更改的 reducer 感觉非常非常奇怪。更糟糕的是，我使用 electron-redux 来保持多个进程同步——我在主进程和渲染器窗口中都运行了一个完整的 redux 堆栈，使用 electron-redux 将它们保持在共享中状态。

我越看这个，就越觉得 reducer 是完全错误的地方。另一方面，这段代码肯定需要基于状态发生，这使得 redux 成为执行此操作的正确位置。不确定这里的正确解决方案是什么——我的设计原则相互矛盾，我不知道如何解决这个问题。

编辑:

这里的部分困难在于reducer 没有进行简单的状态替换。在这种情况下，reducer 正在执行一个非常复杂的算法:

当前状态:

[
  {
    id: 1,
    serverState: 'red',
    localState: 'file'
  },
  {
    id: 2,
    serverState: 'green',
    localState: 'file-processed'
  }
]

服务器可能会发送(因此我的操作有效负载包含):

[
  {
    id: 2,
    serverState: 'purple',
  },
  {
    id: 3,
    serverState: 'blue',
  }
]

结果，我需要合并数据，所以我的状态变成:

[
  {
    id: 2,
    serverState: 'purple',
    localState: 'file-processed'
  },
  {
    id: 3,
    serverState: 'blue',
    localState: 'no-file'
  }
]

请注意，项目 #2 的 localState 没有改变，但是 serverState 项目被覆盖了。项目 #1 的本地文件需要从文件系统中删除，用户不再拥有它们的权限。

Answer 1

除了更改存储之外，reducer 不是产生副作用的正确位置。

有一些库用于处理与 redux 相关的副作用。比如有redux-saga:https://redux-saga.js.org/

Redux-saga 是一个 redux 中间件，sagas 由与更新 redux store 相同的操作触发。