React Redux不变性备忘单

时间:2016-05-10 16:08:42

标签: javascript reactjs redux

我目前正在学习与redux的反应,并且知道不变性是这些技术的关键组成部分,但我却在努力完全理解如何实现它。

因此我想知道是否有任何反应/还原不变性的备忘单?

如果没有,那么在您的react redux应用程序中实现不变性的首选方法是什么?

4 个答案:

答案 0 :(得分:2)

就其本质而言,Redux应用程序状态已经是不可变的。每次启动动作时,Redux都会破坏您的应用程序状态并重建一个全新的应用程序状态(这会触发重建状态的reducer)。因此,没有用于使Redux可以不变地工作的备忘单,因为它已经存在。

您可能会感到困惑,因为存在处理不可变结构的库,例如Immutable.js,并且存在用于将这些库合并到Redux中的包,例如redux-immutable。虽然使用Immutable.js意味着您的各个状态块被保存为不可变结构,但这不是使您的应用程序状态不可变所必需的,因为应用程序状态的基本特性在有或没有库的情况下已经是不可变的。将Immutable.js与Redux一起使用对于快速比较从状态向下传递的道具以查看它们是否已更改以便绕过重新渲染非常有用。

答案 1 :(得分:1)

我刚写了一篇关于此的博文!您可以在此处找到它:http://www.curbitssoftware.com/2017/08/25/react-redux-immutable-update-cheat-sheet/

使用Redux时,有一件事非常重要,那就是永远不要改变(直接改变)你的状态。相反,你应该总是返回你改变的状态的副本(一个常见的误解是你需要复制/克隆所有内容,阅读更多herehere。这意味着你需要学习新的方法使用数组,更改对象的属性等等。为了使这更容易,我们想要分享我们自己的备忘单/食谱书,用于最常见的情况。

祝你好运!

答案 2 :(得分:0)

我发现这一系列视频对于这个主题非常有用:

https://egghead.io/courses/getting-started-with-redux

它是免费的,并在React文档中推荐。有一些特定的简短部分描述了如何编写不修改现有状态的reducer函数。他们讨论了使用Object.assign(),ES6 ...点差运算符等等。

我发现一个有用的特定策略是在原始状态下使用deepFreeze进行测试,以确保您的reducer函数不会对其进行修改。

https://www.npmjs.com/package/deep-freeze-strict

答案 3 :(得分:0)

让我感到震惊的主要事情是,当你从reducer返回state对象时,redux中没有任何内容可以强制你只是意外地改变以前的状态。

我正在使用Object.assign({}, state, {key: 'new value'})返回更新状态的副本,但是如果你的州不平坦,那就是。

state => {foo: {bar: {baz: 'some value'}}}

嵌套对象将引用而不是复制,因为Object.assign() 是深层副本,并且变得非常容易保持陈旧状态,或者通过覆盖更高的值来意外地核对嵌套属性。

Immutable.js和其他库将帮助您使用实用程序来解决此问题。或者你可以保持状态平稳,就像redux docs推荐的那样。您可以单独复制每个嵌套属性,但这会给减速器增加一些重要性。