pcwu's TIL Notes


[React] Redux 把 Store 轉換成 Props 傳遞的作用

為什麼要將 stateprops 的形式傳遞給各元件呢?

如果照原本以 state 的形式傳遞的話,元件並不會主動發現 state 改變而 re-render, 所以就必須主動訂閱,將 subscribeunsubscribe掛載在 componentDidMountcomponentWillUnmount

componentDidMount() {
  this.unsubscribe = store.subscribe(() =>
    this.forceUpdate()
  );
}

componentWillUnmount() {
this.unsubscribe();
}

render() { ... }

但除了自己的 state 改變外,父元件傳下來的 props 有變化也會觸發 re-render。

所以其實將 store 變成 props 來傳遞就可以解決問題了。從最根部就開始,所以可以使用 react-redux 提供的 <Provider>

const store = createStore(reducer)

render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

就變成子元件只要:

render() {
    const props = this.props;
    const { store } = props;
    const state = store.getState();
    ......
}

就可以取得 state 同時也會在 state 有任何改變時即時 re-render 了。

當然我們不會每個元件都會用到整個 store,所以只要透過 props 傳遞部份資訊就好,這個部份拆成另一個筆記好了。

Reference