在Redux Toolkit reducer中调用localStorage是否违背Redux设计原则？

代码片段 #

Reducer部分：

reducers: {
  setMessage: (state, { payload }) => {
    state.message = payload;
    saveStore(state);
  },
},

持久化函数：

export const saveStore = (state) => {
  localStorage.setItem("store", JSON.stringify(state));
};

疑问 #

这段代码可正常运行，但有以下疑问：

1. 这样会导致reducer不再是纯函数吗？
2. 磁盘写入属于程序外部操作，是否不受Redux的「无副作用」规则约束？
3. 已知Redux Persist是可行方案，想确认上述写法是否违背Redux的设计初衷，若违背，原因是什么？

回答 #

这种写法确实让reducer不再是纯函数，且完全违背了Redux的设计初衷，原因如下：

• Redux对reducer的核心要求就是必须是纯函数，纯函数的定义是：相同输入永远返回相同输出，且不能产生任何副作用——而读写localStorage属于典型的外部副作用操作，完全在禁止范围内。
• Redux的设计逻辑是职责分离：reducer只负责根据action计算新的state，所有涉及外部交互、状态持久化这类副作用，都应该放在中间件（比如Redux Toolkit的createListenerMiddleware）、组件的副作用钩子（如React的useEffect）里处理。
• 直接在reducer里写localStorage会带来实际问题：
  • 破坏可预测性：调试时无法直观区分state更新和副作用触发的逻辑，多次触发reducer会导致重复写入，可能引发性能损耗。
  • 违背单一职责：reducer的职责仅为更新state，持久化是独立的功能模块，不该耦合在一起。
• Redux Persist之所以是标准方案，正是因为它通过中间件监听state变化，在合适时机执行持久化操作，完全遵循了Redux副作用分离的设计原则。

内容的提问来源于stack exchange，提问作者seventeen