1. 程式人生 > >react-router搭配react-redux無法監聽路由變化的問題

react-router搭配react-redux無法監聽路由變化的問題

不必要 默認 cti 傳遞 通過 nbsp fun urn style

在react中,要將react組件連接到redux中,通常會這樣包裝組件

class Home extends Component {

}

function select(state) {
  return {
    logBox:state.logBox
  }
}

export default connect(select)(Home)

但是當搭配react-router的時候,在進行路由跳轉的時候,組件不會重新render。這個時候看react-redux的connect方法的說明:

connect([mapStateToProps], [mapDispatchToProps], [mergeProps],[options])

mapStateToProps(state, [ownProps]):如果定義該參數,組件將會監聽 Redux store 的變化。

mapDispatchToProps(dispatch, [ownProps]):如果傳遞的是一個對象,那麽每個定義在該對象的函數都將被當作 Redux action creator,而且這個對象會與 Redux store 綁定在一起,其中所定義的方法名將作為屬性名,合並到組件的 props 中。如果傳遞的是一個函數,該函數將接收一個 dispatch 函數,然後由你來決定如何返回一個對象,這個對象通過 dispatch 函數與 action creator 以某種方式綁定在一起(提示:你也許會用到 Redux 的輔助函數 bindActionCreators()

mergeProps(stateProps, dispatchProps, ownProps):如果指定了這個參數,mapStateToProps()mapDispatchToProps() 的執行結果和組件自身的 props 將傳入到這個回調函數中。該回調函數返回的對象將作為 props 傳遞到被包裝的組件中。

options:

如果指定這個參數,可以定制 connector 的行為。

  • [pure = true] (Boolean): 如果為 true,connector 將執行 shouldComponentUpdate 並且淺對比 mergeProps 的結果,避免不必要的更新,前提是當前組件是一個“純”組件,它不依賴於任何的輸入或 state 而只依賴於 props 和 Redux store 的 state。默認值為 true
  • [withRef = false] (Boolean): 如果為 true,connector 會保存一個對被包裝組件實例的引用,該引用通過 getWrappedInstance() 方法獲得。默認值為 false

options中pure屬性默認為true,估計是因為淺對比的原因,沒有獲取到路由的變化,因此可以將pure設置為false

class Home extends Component {

}

function select(state) {
  return {
    logBox:state.logBox
  }
}

export default connect(select,undefined,undefined,{pure:false})(Home)

這樣路由變化的時候,該組件就能監聽並且重新render了。

react-router搭配react-redux無法監聽路由變化的問題