javascript - Cách xử lý việc hủy đăng ký trong một component React khi sử dụng Redux như thế nào?

Trong thành phần của tôi, tôi có những điều sau:

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

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

Không gọi hủy đăng ký gây ra lỗi sau:

Cảnh báo: setState(...): Chỉ có thể cập nhật một component đang được gắn hoặc đang gắn. Thông thường điều này có nghĩa là bạn đã gọi setState() trên một component chưa được gắn. Đây là một hành động không có tác dụng.

Điều tôi muốn biết là tôi có nên gán unsubscribe cho this hay có một vị trí tốt hơn để gán nó không?

Câu trả lời #1

Như Salehen Rahman đã đề cập ở trên trong phần bình luận, tôi cuối cùng đã sử dụng react-redux.

Theo tài liệu của họ, tôi đã tạo hai hàm, một hàm để ánh xạ 'trạng thái toàn cục' đến các props trong thành phần:

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

và một cái để ánh xạ các hành động đã gửi đến các hàm được truyền vào component như các 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))
  };
}

Sau đó tất cả sẽ được kết hợp lại bằng cách sử dụng phương thức connect:

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

Tôi có cảm giác rằng tất cả những gì việc này làm bên trong là gắn phương thức unsubscribe vào component nhưng nó thực sự đơn giản hóa mọi thứ đáng kể.