Come si deve gestire l'annullamento dell'iscrizione in un componente che reagisce quando si usa Redux?

Question

Nel mio componente ho il seguente:

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

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

Non chiamando unsubscribe causa il seguente errore:

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.

Quello che mi piacerebbe sapere è dovrei assegnando unsubscribe a this o c'è un posto migliore per assegnarlo?

Answer 1

Come menzionato da Salehen Rahman sopra nei commenti, ho terminato utilizzando react-redux.

A seguito della loro documentazione che ho creato due funzioni, una per mappare la 'stato globale' per gli oggetti di scena all'interno del componente:

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

e uno per mappare le azioni che vengono consegnati a funzioni passati nel componente come oggetti di scena:

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)) 
    }; 
} 

Questo poi tutto viene tirato insieme con il metodo connect:

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

Ho la sensazione che tutto questo funzioni sotto il cofano sia collegato al metodo unsubscribe al componente, ma semplifica notevolmente le cose.