[React] Redux 把 Store 轉換成 Props 傳遞的作用
為什麼要將 state 以 props 的形式傳遞給各元件呢?
如果照原本以 state 的形式傳遞的話,元件並不會主動發現 state 改變而 re-render,
所以就必須主動訂閱,將 subscribe 和 unsubscribe掛載在 componentDidMount 和 componentWillUnmount:
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 傳遞部份資訊就好,這個部份拆成另一個筆記好了。