實作 Redux(六):總結、流程


Posted by YongChenSu on 2020-12-14

dispatch

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

createStore

可以產生 store,裡面包含 getStatedispatch 函數。

subscribe

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

reducer

  1. 為了避免效能問題,優化 stateChangerreducer
  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(...)

參考資源


#程式導師實驗計畫第四期 #前端 #React #react book #Redux







Related Posts

Reformer - The Efficient Transformer

Reformer - The Efficient Transformer

把問題條列化 - 自主練習

把問題條列化 - 自主練習

[ week 1 ] Command Line 使用方法

[ week 1 ] Command Line 使用方法


Comments