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

Question

为什么Redux中的对象应该是不可变的？我知道一些框架如Angular2将使用onPush并且可以利用不变性来比较视图状态以便更快地呈现,但我想知道是否还有其他原因因为Redux是框架无关的,但它在自己的文档中提到使用不变性(无论框架如何).

感谢任何反馈.

Answer 1

Redux是一个小型库,它将状态表示为(不可变)对象.和新的状态通过使当前状态通过纯函数来创建一个全新的对象/应用程序状态.

如果你的眼睛釉面那边不用担心.总而言之,Redux不会通过修改对象来表示应用程序状态的变化(就像使用面向对象的范例一样).相反,状态更改表示为输入对象和输出对象()之间的差异var output = reducer(input).如果你改变了,input或者output你使状态无效.

总结另一种方式,不变性是Redux的要求,因为Redux将您的应用程序状态表示为"冻结对象快照".使用这些离散快照,您可以保存状态或反向状态,并且通常对所有状态更改具有更多"记帐".

您的应用状态仅由称为reducer的纯函数类别更改.减速器有两个重要特性:

1. 它们从不变异,返回新构建的对象:这允许推理输入+输出而没有副作用
2. 他们的签名总是 function name(state, action) {}如此,因此可以很容易地编写它们:

假设状态如下:

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

我们想增加计数,所以我们制作这些减速器

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 Objectd.assign({}, {_2ndLevel: _2ndlevel(state._2ndlevel)});
    }
}

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

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

    dispatch({type: INCR_2ND_LEVEL_COUNT})

... Redux将致电:

    theNewState = topLevel(theState, action);

注意:action来自dispatch()

现在theNewState是一个全新的对象.

注意:您可以使用库(或新语言功能)强制实现不变性,或者只是小心不要改变任何内容:D

为了更深入一点,我强烈建议您查看Dan Abramov(创作者)的视频.它应该回答你有任何挥之不去的问题.

Answer 2

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

• Redux和React-Redux都采用浅层相等检查.特别是:
  • Redux的combineReducers实用程序可以浅见地检查由它调用的reducer引起的引用变化.
  • React-Redux的connect方法生成的组件浅层地检查对根状态的引用更改,以及来自mapStateToProps函数的返回值,以查看包装的组件是否实际需要重新呈现.这种浅层检查需要不变性才能正常运行.
• 不可变数据管理最终使数据处理更安全.
• 时间旅行调试要求减速器是纯函数,没有副作用,因此您可以在不同状态之间正确跳转.

Answer 3

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