为什么我的 redux 商店不是不可变的？答案

【问题标题】：Why is my redux store not immutable?为什么我的 redux 商店不是不可变的？
【发布时间】：2017-04-12 16:23:20
【问题描述】：

我目前正在使用 react-redux 和 Immutable.js。我刚刚意识到我商店中的每个字段都是不可变的类型。但是，当我 console.log 存储时，它实际上是一个对象，其中的值是不可变类型的。商店本身，仍然是一个对象。

我创建了一个名为configStore 的自定义函数，其中我使用compose 添加中间件、devtools 等。然后我调用configStore 来实际创建我的商店，它将一个空对象作为初始状态。当我 console.log 我的商店时，我会得到如下信息：

Object {
  keyA: Map(),
  keyB: OrderedMap(),
  ...
}

这似乎与我在整个应用程序中一直在做的事情相矛盾，其中选择器获取整个状态以获取商店中的数据。例如，我会做一些诸如(state) => state.keyA.getIn(nestedKey, furtherNestedKey) 之类的事情。 getIn() 是一个 ImmutableJS API。

这让我有几个让我担心的问题：

如果state是一个对象，如我在console.log store时显示的那样，Immutable如何与之交互？
是否有一个非 Immutable 存储（其中包含 Immutable 数据类型），违背了使用 Immutable 和 React-redux 的目的？

【问题讨论】：

代码 sn-p (state.keyA.getIn...) 暗示 Immutable 不与外部对象交互。
Immutable.js 是不是使 JS 对象不可变的唯一方法。你也可以使用 freeze() 我认为 redux 在其 combineReducers 中所做的事情。不过，根本不需要使用不可变对象。这只是防止你改变数据的帮手。
@OliverCharlesworth 啊。你是绝对正确的。不过有什么缺点吗？我的商店是不可变类型的对象，这似乎不对。
@Sulthan 是的，这就是不可变的全部意义所在。那么外部对象不应该也是不可变的吗？
@AlanH 你可以让它们不可变。您是调用 combineReducers 的人，如果您愿意，可以将该结果转换为不可变的。

标签： reactjs react-redux immutable.js

【解决方案1】：

Immutable 只提供了最常见的一组数据结构的不可变版本，例如List、Map、Set 等。它不直接与状态交互，而是可以使用它的数据结构在状态的某些属性中，例如，存储对象的集合。您应该使用 Immutable，这样您就可以在不改变状态的情况下操作这些数据结构。以下面的代码为例，假设您有一个返回文章数组的操作：

import Immutable from 'immutable';

reducer = (state = {
  articlesLoaded: false,
  articles: Immutable.List(),
}, action) => {
  switch(action.type) {
    case "GET_ARTICLES":
      return { 
        ...state, 
        articlesLoaded: true, 
        articles: Immutable.List(action.articles) 
      };
    default:
      return state;
  }
}

使用 Immutable 的目的纯粹是为了方便，因为它可以更轻松地避免数据结构中的突变。当然，您可以拥有一个不是不可变数据结构的存储，实际上这是最常见的用例。需要注意的是，对象的不可变性并不取决于对象本身，而是取决于您操作它的方式（不是，而是创建一个新对象），因此您也可以在使用 Immutable 时改变状态如果你真的把事情搞砸了。

如果您不想完全使用 Immutable，redux-immutable 有一个使用 Immutable 数据结构的 combineReducers 的修改版本，因此您可以将整个状态定义为 Immutable.Map。

【讨论】：