React 的 useReducer 钩子的 reducer 函数必须是纯的吗？答案

【问题标题】：Do reducer functions for React's useReducer hook have to be pure?React 的 useReducer 钩子的 reducer 函数必须是纯的吗？
【发布时间】：2020-08-20 08:50:18
【问题描述】：

The docs for the useReducer hook 有点模糊：

接受(state, action) => newState 类型的reducer，并返回与dispatch 方法配对的当前状态。（如果您熟悉 Redux，那么您已经知道它是如何工作的。）

The Redux docs 然后说

reducer 保持纯净非常重要。你应该永远不要在 reducer 中做的事情：

改变它的论点；

执行 API 调用和路由转换等副作用；

调用非纯函数，例如Date.now() 或 Math.random()。

但我没有使用 Redux。 React 文档似乎没有说减速器必须是纯的。只是那种模糊的说法，知道 Redux 的人“已经知道它是如何工作的”。

那么，useReducer 的 reducer 函数需要是纯函数吗？ 如果是，为什么？如果不是，应该它们是纯的吗？如果是这样，为什么？

我正在想象一个动作将状态更新为“正在加载”，同时触发一个 API 调用，该调用在响应时会分派不同的动作并因此再次更新状态。

【问题讨论】：

标签： reactjs

【解决方案1】：

记住在useReducer: 状态中reducer 的用途。这是一种将一堆状态分组到一个地方的方法，而不是使用 10 个 useState 钩子。所以，在减速器中，你不应该做副作用。副作用有一个地方：useEffect 钩子。

鉴于您的加载状态示例，您只需执行以下操作：

useEffect(() => {
    dispatch({type: 'SET_LOADING', payload: true})

    // fetch your stuff

    dispatch({type: 'SET_LOADING', payload: false})
}, [/* your dependencies */])

React 遵循函数式范式，而函数式纯度是其中很大一部分。减速器可能有副作用（毕竟它们只是函数）。减速器不应该出于同样的原因，您不会将所有代码放在单个组件中：每个函数/文件/组件都有特定的用途。减少用于状态。

【讨论】：

感谢您的回答，但它没有向我解释“为什么”。