Redux Toolkit 中的不变性检查中间件有什么作用？

Question

我正在尝试学习 Redux Toolkit 并遇到了 configureStore() 的默认中间件：

不变性检查中间件：深入比较状态值以进行突变。它可以检测分派期间 reducer 中的突变，以及分派之间发生的突变（例如在组件或选择器中）。当检测到突变时，它将抛出错误并指示在状态树中检测到突变值的关键路径。（从 redux-immutable-state-invariant 分叉。）

我很困惑。 reducer 和 dispatch 函数不应该改变状态值吗？为什么要抛出错误？

Answer 1

很容易意外改变组件中的状态。

假设你有类似的东西

const myList = useSelector(state => state.foo.bar)
myList.sort()

那是一个意外的状态突变 - 因为 myList 是对您的商店的引用，并且 .sort() 突变一个数组而不是创建一个新的排序副本。

这是一个经常被忽视一段时间的错误，直到您变得非常奇怪并且难以调试应用程序中的错误。

至于 reducers 是否允许改变状态：是和否。在像 createSlice 这样的 immer reducer 中，你可以编写变异逻辑，但在幕后它会创建旧状态的新副本并且永远不会“变异”旧状态 - 所以这是安全的。但是如果你是 hand-writing 一个 reducer，很容易做和上面一样的事情——调用 .sort() 或 .push 并且你不小心修改了旧的存储值。

那个中间件会检查这两个：reducer 之外的意外突变，以及 hand-written 中的意外突变。

Redux Toolkit 中的不变性检查中间件有什么作用？

What does the immutability check middleware do in Redux Toolkit?

middleware

store

mutation

redux

redux-toolkit