[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
傳遞部份資訊就好,這個部份拆成另一個筆記好了。