使用redux時如何在反應組件中取消訂閱？

在我的組件我有以下幾點：使用redux時如何在反應組件中取消訂閱？

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有一個更好的地方分配它？

來源

2015-09-03 Clarkie

您應該嘗試使用componentDidMount（）而不是componentWillMount（）。 – legolandbridge

@legolandbridge，因爲我仍然需要'取消訂閱'，所以沒有任何區別。 – Clarkie

您是否使用'react-redux'的'connect'和'Provider'進行了研究？ –

正如上述Salehen Rahman所述，我最終使用react-redux。

按照他們的文檔我創建了兩個功能，一是在組件內映射「全局狀態」的道具：

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方法的組件，但它確實簡化了很多事情。

來源

2015-09-06 21:39:25 Clarkie

在引擎蓋下，它的確將'unsubscribe'附加到'this'--但不是你的組件。 React Redux'connect（）'產生一箇中間組件：這就是爲什麼你接收數據爲'this.props'，而不是'this.state'。您應該在大多數情況下使用React Redux，而不是手動滾動它，因爲它具有某些性能優化。 –

使用redux時如何在反應組件中取消訂閱？

回答

相關問題