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

我一直在搞乱一些代码,我想我刚刚意识到一些愚蠢的事情。在没有 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。

解答

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