为什么Redux中的对象应该是不可变的？

Question

为什么Redux中的对象应该是不可变的？

javascriptangularreactjsreduximmutability

51

为什么Redux中的对象应该是不可变的？我知道一些框架，比如Angular2将使用onPush并利用不可变性来比较视图状态以实现更快的渲染，但我想知道是否还有其他原因，因为Redux是框架无关的，但在自己的文档中提到要使用不可变性（无论框架如何）。

感谢任何反馈。

- born2net

2

它使得推理更加简单，有助于防止您意外地在Redux之外更改状态。 - Matthew Herbst

3

谢谢您的回答，但有些含糊不清。我知道这是他们经常说的话。将名称从A更改为B并不会使其更复杂或更难理解。 - born2net

4

这样说吧：如果我知道一个数据结构是不可变的，那么我就知道代码中有一些部分绝对不能改变它。这使得测试代码和发现错误变得更加简单。 - Matthew Herbst

好的，对我来说，接口数据结构听起来更像是一个更可靠的合同，但这只是我的想法...无论如何，我将使用不变性作为模式，以便在ng2中获得更快的onPush渲染...谢谢。 - born2net

是的，JavaScript没有Java可以强制执行的所有好规则。ES6带来了很多结构，但归根结底，仍然很容易无意中轻松更改您不想更改的内容。 - Matthew Herbst

显示剩余2条评论

5个回答

16

在 Redux 文档中提到了以下不可变性的好处：

Redux 和 React-Redux 都采用浅相等检查。特别地：

Redux 的 combineReducers 工具浅层检查由其调用的 reducer 引起的引用更改。

React-Redux 的 connect 方法生成的组件浅层检查根状态和 mapStateToProps 函数的返回值，以查看是否需要重新渲染包装的组件。这种浅层检查需要使用不可变性才能正常工作。

不可变数据管理最终使数据处理更加安全。

时光旅行式调试要求 reducer 是纯函数，没有副作用，这样您就可以在不同的状态之间正确跳转。

- Andrea Casaccia

换句话说，忽略建议并改变state会干扰“应该组件更新”的逻辑吗？能否说明会以何种方式出错，例如始终/从不/取决于什么？ - bluenote10

1

你的问题的答案并不是简单的。它取决于你的状态如何结构化，你正在改变什么深层属性以及是否使用了 combineReducers 和/或 react-redux。如果你更深入地了解 combineReducers 和 react-redux，你肯定可以知道会发生什么。通常情况下，当由于浅层检查而未检测到深层更改时，你的 UI 中的某些组件将不会更新。但最重要的是——不要改变状态。这是一件坏事™。 - Andrea Casaccia

他们第一次复制了所有对象，然后说用“浅”比较会更快。哈哈，我开始打嗝了。 - puchu

@bluenote10，你可以自由地改变你的状态，不要听从函数式编程的狂热者。不可变性是一件与JS无关的神圣遗物。请阅读更多关于react+mobx或vue.js的内容。 - puchu

9

Redux使用不可变性的主要原因是它不必遍历对象树来检查每个键值的更改。相反，它只会检查对象的引用是否已更改以便在状态更改时更新DOM。

- Himanshu Dhingra

这是不正确的，因为UI层仍然必须遍历整个对象树（即新状态）以查看发生了什么变化。 - user1034912

1

优秀的文章 https://medium.cobeisfresh.com/how-redux-can-make-you-a-better-developer-30a094d5e3ec

不可变数据和纯函数是函数式编程的核心概念之一。

- zloctb

如果函数只处理不可变数据，那么它是纯的。但它是不可逆的。有一些纯函数会改变数据。可以从不纯的函数组创建纯函数。这个概念很古老，也不完整。不要毒害人们的大脑。 - puchu

0

根据官方文档：

在Redux中，有几个原因说明为什么不能改变状态：

它会导致错误，例如UI无法正确更新以显示最新值
它使得更难理解状态何时以及如何被更新
它使得编写测试更加困难
它破坏了正确使用“时间旅行调试”的能力
它违背了Redux的预期精神和使用模式

Reudx官方文档

- alithecodeguy

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ashley Coolman · Accepted Answer

Redux是一个小型的库，将状态表示为(不可变)对象。通过纯函数将当前状态传递来创建全新的对象/应用程序状态，从而产生新状态。

如果您感到有些困惑，不用担心。简而言之，Redux不通过修改对象来表示应用程序状态的更改(如面向对象编程所做的那样)。相反，状态更改表示为输入对象和输出对象(var output = reducer(input))之间的差异。如果您改变或中的任意一个，则会使状态无效。

用另一种方式来概括，Redux需要不可变性，因为它将您的应用程序状态表示为"冻结的对象快照"。通过这些离散的快照，您可以保存状态或撤消状态，并且通常对所有状态更改都有更多的"控制"。

你的应用程序的状态仅由被称为reducer的一类纯函数更改。Reducer具有两个重要属性：

它们永远不会改变状态，返回新构建的对象：这允许在没有副作用的情况下推理输入+输出
它们的签名总是function name(state, action) {}，因此易于组合：

假设状态看起来像这样：

    var theState = {
      _2ndLevel: {
        count: 0
      }
    }

我们希望增加计数，因此我们创建了这些reducer

const INCR_2ND_LEVEL_COUNT = 'incr2NdLevelCount';

function _2ndlevel (state, action) {
    switch (action.type) {
        case INCR_2ND_LEVEL_COUNT:
            var newState = Objectd.assign({}, state);
            newState.count++
            return newState;
        }
    }

function topLevel (state, action) {
    switch (action.type) {
        case INCR_2ND_LEVEL_COUNT:
            return Object.assign(
                {}, 
                {_2ndLevel: _2ndlevel(state._2ndlevel, action)}
            );
    }
}

请注意在每个reducer中使用Object.assign({}, ...)来创建全新的对象:

假设我们已经将Redux连接到这些reducers，那么如果我们使用Redux的事件系统来触发状态更改...

    dispatch({type: INCR_2ND_LEVEL_COUNT})

...Redux 会调用：

    theNewState = topLevel(theState, action);

注意: action 是来自于 dispatch()

现在，theNewState 是一个全新的对象。

请注意：您可以使用库（或新的语言特性）强制实现不可变性，或者只需小心不要改变任何东西:D

如果想深入了解，我强烈推荐您查看这个视频，由创建者Dan Abramov制作：video链接。它应该回答您所拥有的任何问题。