在没有 Flux 或 Redux 的情况下使用 Immutable.js

Question

我一直在搞乱一些代码，我想我刚刚意识到一些愚蠢的事情。在没有 Flux 或 Redux 的情况下在 React 中使用 Immutable.js 是徒劳的。

toggleTask(task) {
    const found = _.find(this.state.taskList, task => task.name === task);
    found.isDone = !found.isCompleted;
    const index = _.findIndex(this.state.taskList, task => task.name === task);

    const temp = Immutable.fromJS(this.state.taskList);
    temp.setIn([index, 'isDone'], found.isDone).toJS();

    this.setState({ taskList: temp.toJS() });

}

所以基本上在我意识到自己是多么愚蠢之前，我正在创建一个不可变对象，使用 Immutable.js 方法对其进行更改，然后将其更改回数组。这是没用的，因为浅比较应该在没有不可变对象的情况下工作。

shouldComponentUpdate(nextProps) {

    return (this.props.name !== nextProps.name || this.props.priority !== nextProps.priority || this.props.isDone !== nextProps.isDone  );
}

我一直在使用 lodash 方法，但是由于我是单独比较道具并且因为它们是原语（字符串和布尔值等原语不能是不可变的），所以我认为这并不重要，它会即使我不使用它们也可能有效。

toggleTask(task) {
    const found = _.find(this.state.taskList, task => task.name === task);
    found.isDone = !found.isDone;
    this.setState({ taskList: this.state.taskList });
}

所以我说 React 中的 Immutable.js 没有 Redux 或 Flux 就没有用是不是错了？有什么我不正确理解的吗？我看过一些例子，因为我从未使用过 Flux 或 Redux，所以它们对我来说不太有意义。

Answer 1

是的，您实际上是在正确的轨道上。 Immutable.js 在 Redux/Flux 中更有用的原因是 Immutable.js 允许您与深度嵌套的 json 对象进行廉价的浅比较。这是它的主要优势。在您的情况下，我怀疑您有一个简单的待办事项应用程序，其中您的状态是简单数组的列表，在这种情况下，您不会从使用 Immutable.js 中得到任何东西，因为您可以只比较属性，这并不昂贵.你可能在 Redux 应用程序中也不需要它，但在大型项目中你可能经常有非常大的深度嵌套的 json 对象，在这种情况下 Immutable.js 非常有用。

Answer 2

Immutable 与 Redux 或 Flux 无关。

您可以在没有 Immutable 的情况下使用 Flux 和 Redux，也可以在没有 Flux 和 Redux 的情况下使用 Immutable。

Immutable 有助于促进基于不可变数据结构的良好编程风格。就这样。这种编程风格非常适合函数式编程和 React。

Immutable 并不是唯一这样做的框架。 Javascript 有它自己的Object.freeze 方法，它使对象不可变而无需额外的容器。您也可以使用icepick 等。