使用 redux 时应该如何在反应组件中处理取消订阅？

Question

在我的组件中有以下内容：

componentWillMount: function () {
  this.unsubscribe = store.subscribe(function () {
    this.setState({message: store.getState().authentication.message});
  }.bind(this));
},

componentWillUnmount: function () {
  this.unsubscribe();
},

不调用取消订阅会导致以下错误：

Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op.

我想知道我应该将 unsubscribe 分配给 this 还是有更好的分配位置？

Answer 1

如 Salehen Rahman above in the comments I did end up using react-redux 所述。

根据他们的文档，我创建了两个函数，一个是将 'global state' 映射到组件中的道具：

function mapStateToProps(state) {
  return {
    users: state.users.items
  };
}

还有一个用于将分派的操作映射到作为 props 传递到组件中的函数：

function mapDispatchToProps(dispatch) {
  return {
    lockUser: (id) => dispatch(actions.lockUser(id)),
    unlockUser: (id) => dispatch(actions.unlockUser(id)),
    updateUser: (id, user) => dispatch(actions.updateUser(id, user)),
    addUser: (user) => dispatch(actions.addUser(user))
  };
}

然后使用 connect 方法将所有内容整合在一起：

export default connect(mapStateToProps, mapDispatchToProps)(UsersContainer);

我有一种感觉，所有这一切在幕后所做的就是将 unsubscribe 方法附加到组件，但它确实大大简化了事情。

使用 redux 时应该如何在反应组件中处理取消订阅？

How should unsubscribe be handled in a react component when using redux?

javascript

reactjs

redux