Question

我在一些React / Redux教程中看到了以下片段：

componentWillUnmount() {
    this.unsubscribe();
}

componentDidMount() {
    this.unsubscribe = this.context.store.subscribe(() => {
        this.forceUpdate();
    });
}

此代码的目的是什么？卸载组件时，只要存储发生更改，此代码是否会调用forceUpdate？我们为什么要这样做？

Answer 1

我认为你有点误读了这段话。

store.subscribe()接受每次将动作分派到商店时运行的回调。它还返回一个函数，该函数将从商店的侦听器列表中删除该特定回调。

在该示例中，每次调度操作时，组件都会调用this.forceUpdate()。卸载组件后，它会调用this.unsubscribe()，这将从商店中删除该侦听器。

然而，在React组件中对商店API的这种“原始”使用是反模式。 React-Redux库已经抽象出与商店交互的过程，您应该使用它将React组件连接到Redux。 Angular，Ember，Vue等存在类似的抽象。编写自己的商店订阅代码真的没有理由。

作为旁注，如果您能留下评论显示您看到该片段的位置，我会很感激，因为我想鼓励他们不要这样做。

Answer 2

调用this.unsubscribe()方法将删除连接到商店更新事件的先前事件处理程序。

就像许多教程一样，这不会是你将在更复杂的产品中使用的任何东西。

如果您选中，this.subscribe方法会返回一个您可以调用的方法，当您不再订阅该商店时，

以下Redux范式背后的原因是什么？

2 个答案: