Redux reducer 中的副作用答案

【问题标题】：Side effects in Redux reducerRedux reducer 中的副作用
【发布时间】：2018-05-29 18:01:50
【问题描述】：

Redux reducer 应该没有副作用。但是如果一个动作应该触发在浏览器中下载一个文件，其中的内容是基于商店的状态的呢？当然，这应该算作副作用吗？像以下这样可以吗？还是我应该寻找替代方法？

case 'SAVE_GRID': {
  const { json } = state
  fileDownload(json, 'data.json', 'application/json')
  return state
}

【问题讨论】：

标签： javascript reactjs redux side-effects

【解决方案1】：

除非您有非常复杂的状态转换，否则实际的fileDownload 应该发生在动作创建器中，而不是在减速器中。 reducer 应该负责合并/减少状态，仅此而已。

行动：

export const saveGrid = (json) => {
   return (dispatch) => {  
       fileDownload(json, 'data.json', 'application/json')
           .then(() => {
              dispatch({ type: 'SAVE_GRID', json });
           });
   }
}

减速器：

case 'SAVE_GRID': {
    return {
        ...state,
        json: action.json
    }
}

【讨论】：

【解决方案2】：

有一些库可以处理这种“副作用”。

例如：

redux-observables：他们在底层使用 RX observables。

https://redux-observable.js.org/docs/basics/Epics.html

redux-saga

https://redux-saga.js.org/

【讨论】：

【解决方案3】：

Reducer 可以驱动效果，事实上，它们一直通过触发 UI 渲染的状态变化来实现 - 可以说是应用程序最重要的效果。

驱动非视觉效果并不常见，但至少有两种解决方案：redux-loop 和 redux-agent（我写的）。

来自各个网站：

redux 循环：

Elm 架构到 Redux 的一个端口，它允许您通过从 reducer 返回它们来自然而纯粹地对效果进行排序。 https://redux-loop.js.org/

redux 代理：

Redux Agent 将 React 的模型扩展到非可视 I/O：描述网络请求、存储操作、websocket 消息……并让机器担心执行它。逻辑留在 reducer 中，组件保持轻量级，很容易看出什么状态触发了哪个效果。 https://redux-agent.org/

（引号还暗示了两者之间的主要区别：redux-loop 从 reducer 返回效果描述，从而更改其 API 并需要存储增强器。redux-agent 与 vanilla Redux API 一起使用。）

【讨论】：

【解决方案4】：

我使用钩子 useReducer 代替 redux。我不喜欢在动作创建者中添加副作用——那么不清楚动作创建者的目的是什么：构建动作，还是运行副作用？

我在这里找到了一个满足我目的的库：

https://github.com/Jibbedi/use-reducer-effect

【讨论】：