为什么 Redux 中的对象应该是不可变的? [英] Why should objects in Redux be immutable?

问题描述

为什么 Redux 中的对象应该是不可变的?我知道某些框架(例如 Angular2)将使用 onPush 并且可以利用不变性来比较视图状态以加快渲染速度，但我想知道是否还有其他原因，因为 Redux 与框架无关，但它在自己的文档中提到要使用不变性(与框架无关).

Why should objects in Redux be immutable? I know that some frameworks such as Angular2 will use onPush and can take advantage of immutability to compare states of views for faster rendering, but I am wondering if there are other reasons as Redux is framework agnostic and yet it mentions within its own docs to use immutability (regardless of the framework).

感谢任何反馈.

推荐答案

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

Redux is a small library that represents state as (immutable) objects. And new states by passing the current state through pure functions to create an entirely new object/application states.

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

If your eyes-glazed over there don't worry. To sum up, Redux does not represent changes in your application's state by modifying objects ( as you would with object-oriented paradigms). Instead state changes are represented as the difference between the input object and the output object (var output = reducer(input)). If you mutate either input or output you invalidate the state.

换句话说，不可变性是 Redux 的要求，因为 Redux 将您的应用程序状态表示为冻结对象快照".使用这些离散快照，您可以保存您的状态或反转状态，并且通常对所有状态更改都有更多的说明".

To sum up another way, immutability is a requirement of Redux because Redux represents your application state as "frozen object snapshots". With these discrete snapshots, you can save your state, or reverse state, and generally have more "accounting" for all state changes.

您的应用程序的状态仅被称为 reducer 的一类纯函数改变.Reducers 有两个重要的属性:

State of your app is only changed by a category of pure functions called reducers. Reducers have 2 important properties:

1. 他们从不改变，返回新建的对象:这允许对输入+输出进行推理而没有副作用
2. 它们的签名是总是 function name(state, action) {}，所以很容易组合它们:

1. They never mutate, returning newly built objects: This allows reasoning about input + output without side-effects
2. Their signature is always function name(state, action) {}, so it makes it easy to compose them:

假设状态如下:

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

我们想要增加计数，所以我们制作了这些 reducer

We want to increment the count, so we make these reducers

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)}
            );
    }
}

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

Note the use of Object.assign({}, ...) to create an entirely new objects in each reducer:

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

Assuming we have wired up Redux to these reducers, then if we use Redux's event system to trigger a state change ...

    dispatch({type: INCR_2ND_LEVEL_COUNT})

...Redux 将调用:

...Redux will call:

    theNewState = topLevel(theState, action);

注意:action 来自 dispatch()

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

注意:您可以使用一个库(或新语言特性)，或者小心不要改变任何东西:D

Note: You can enforce immutability with a library (or new language features), or just be careful to not mutate anything :D

要更深入地了解，我强烈建议您观看 Dan Abramov 的此视频(创作者).它应该可以回答您的任何挥之不去的问题.

For a deeper look, I highly recommend you checkout this video by Dan Abramov (the creator). It should answer any lingering questions you have.

这篇关于为什么 Redux 中的对象应该是不可变的?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！