componentWillUnmount 中的 Redux 取消订阅仍然调用 subscribe 回调答案

【问题标题】：Redux unsubscribe within componentWillUnmount still calls subscribe callbackcomponentWillUnmount 中的 Redux 取消订阅仍然调用 subscribe 回调
【发布时间】：2017-04-11 20:58:16
【问题描述】：

我手动将 React 组件挂接到 Redux 存储。是的，我知道 Redux 的 Dan Abramov recommends against this。我最终会开始研究 react-redux，但现在我想了解发生了什么。

componentDidMount() {
    this.unsubscribe = store.subscribe(() => {
        const storeState = store.getState();
        this.setState({
            someData: storeState.someData
        });
    }.bind(this));
}
componentWillUnmount () {
    this.unsubscribe();
}

这是我在标签页组件中的一些代码。当用户更改选项卡以显示不同的数据时，这些选项卡页在父组件中被换入和换出。我已经通过调试器并确认当用户更改选项卡时，会按顺序发生以下情况：

前一个选项卡已卸载（componentWillUnmount 触发并调用this.unsubscribe()。this 是前一个选项卡组件，正如预期的那样）
新标签已安装。（componentDidMount 触发，this 是新的标签组件，正如预期的那样）
setState 在订阅回调中被调用，this 是 PREVIOUS TAB，然后反应报错：

警告：setState(...)：只能更新已安装或正在安装的组件。这通常意味着您在未安装的组件上调用了 setState()。这是一个无操作。请检查 Tab 组件的代码。

这对我来说似乎很奇怪。不应该调用unsubscribe，因为我已经阻止在未安装的组件上调用此回调？ post that I'm following along with 似乎暗示做我所做的应该让这个警告消失，并且只是质疑这是否是一个好主意。但就我而言，它仍然存在。

我认为这无关紧要，但我使用的是 ES6“类”语法，而原来的似乎并不重要。

【问题讨论】：

标签： reactjs redux react-redux

【解决方案1】：

subscribe(listener: () => void): Unsubscribe;

让我们阅读订阅方法文档。

订阅会在每次dispatch() 调用之前进行快照。如果您在调用侦听器时订阅或取消订阅，这不会对当前位于的dispatch() 产生任何影响进步。然而，下一个dispatch() 调用，无论是否嵌套，将使用订阅列表的更新快照。

由于您首先调用了 dispatch 方法，所有的监听器都会被调用，并且您的 unsubsribe 调用只会在下一次 dispatch 调用时发生。

【讨论】：