javascript - Bagaimana penarikan langganan harus ditangani dalam komponen react apabila menggunakan redux?

Dalam komponen saya, saya mempunyai yang berikut:

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

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

Tidak memanggil batal langganan menyebabkan ralat berikut:

Amaran: setState(...): Hanya boleh mengemas kini komponen yang sedang dipasang atau sedang dipasang. Ini biasanya bermakna anda memanggil setState() pada komponen yang tidak dipasang. Ini tiada kesan.

Apa yang saya ingin tahu ialah adakah saya perlu menetapkan unsubscribe kepada this atau adakah tempat yang lebih baik untuk menetapkannya?

Jawapan #1

Seperti yang disebutkan oleh Salehen Rahman di atas dalam komen, saya akhirnya menggunakan react-redux.

Mengikut dokumentasi mereka, saya telah mencipta dua fungsi, satu untuk memetakan 'keadaan global' ke dalam props di dalam komponen:

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

dan satu untuk memetakan tindakan yang dihantar ke fungsi yang diserahkan ke dalam komponen sebagai 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))
  };
}

Ini kemudian semuanya digabungkan menggunakan kaedah connect:

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

Saya ada perasaan bahawa semua ini di belakang tabir hanyalah melekatkan kaedah unsubscribe pada komponen tetapi ia memang memudahkan perkara dengan ketara.