使用redux时，应如何在React组件中处理退订？

Question

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

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

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

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

警告：setState（…）：只能更新已安装或正在安装的组件。这通常意味着您在未安装的组件上调用了setState（）。这是无人值守。

我想知道的是我应该分配给它unsubscribe，this还是有更好的分配空间？

Answer 1

正如Salehen Rahman在上面的评论中提到的，我最终还是使用react-redux。

根据他们的文档，我创建了两个函数，一个将“全局状态”映射到组件中的props：

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

并将分配的动作映射为作为道具传递到组件中的函数：

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方法附加到组件上，但实际上确实简化了事情。