實作 Redux（六）：總結、流程

dispatch

提高修改數據的門檻，必須通 dispatch，也需要在 action 裡聲明。

createStore

可以產生 store，裡面包含 getState、dispatch 函數。

subscribe

每次都要重新渲染很麻煩，通過 store.subscribe 監聽數據修改事件，每次數據更新的時候自動渲染畫面。

reducer

1. 為了避免效能問題，優化 stateChanger 為 reducer。
2. 定義 reducer 只能是純函數。
3. reducer 初始化 state。
4. 根據 state 以及 action，計算具有共享結構 (相同記憶體位置) 的state。

總結：使用 createStore 流程

// 定義一個 reducer
funciton reducer (state, action) {
  // 初始化 state 和 switch case
}
// 產生 store
const store = createStore(reducer)
// 監聽數據變化重新渲染畫面
store.subscribe(() => renderApp(store.getState()))
// first render
renderApp(store.getState())
// dispatch 頁面自動更新
store.dispatch(...)

參考資源

• 动手实现 Redux（六）：Redux 总结