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

查看:105
本文介绍了为什么Redux中的对象应该是不可变的?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

为什么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))。如果您改变输入输出,则会使州无效。

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.

您的应用的状态由名为redurs的纯函数类别更改。 Reducers有两个重要的属性:

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


  1. 他们从不变异,返回新构建的对象:这允许推理输入+输出没有副作用

  2. 他们的签名是总是 函数名称(状态,操作){} ,因此可以很容易地编写它们:

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

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

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

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

Note the use of Objectd.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);

注意:行动来自 dispatch()

现在 theNewState 全新对象

注意:您可以使用图书馆强制执行不变性(或新语言功能),或者只是小心不要改变任何东西:D

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

为了更深入一点,我强烈建议你结帐此视频。它应该回答你有任何挥之不去的问题。

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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆