在没有 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 方法，但由于我是单独比较 props 并且因为它们是原语（像字符串和布尔值这样的原语无论如何都不能是不可变的），我认为这并不重要并且即使我不使用它们，它也可能会起作用。

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 与 Redux 或 Flux 无关。

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

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

Immutable 并不是唯一一个这样做的框架。 Javascript 有自己的 Object.freeze 方法，可以使对象在没有额外容器的情况下不可变。您还可以使用 icepick 和其他。

Answer 2

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

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

Using Immutable.js without Flux or Redux

flux

reactjs

immutable.js

redux