【簡明】To learn Redux

  • flux&redux

  • state&reducer

Action 有事情發生了

  • Store 數據的唯一來源, store.dispatch()將action傳到store
  • Action本質是普通對象 ,type字段,action type字段…結構自定
  • bindActionCreators()自動把多個action創建函數綁定到dispatch方法上

Reducer 更新state

  • 純函數,接收舊的state和action,返回新的state

嚴格的單向數據流

  1. 調用store.dispatch(action)
  2. store 調用傳入的reducer函數
    // render 返回處理後的應用狀態
    let nextState = todoApp(previousState, action);
  3. 根 reducer 應該把多個子 reducer 輸出合併成一個單一的 state 樹
    Redux 原生提供combineReducers輔助函數,來把根reducer 拆分成多個函數,用於分別處理 state 樹的一個分支。
  4. Redux store 保存了根 reducer 返回的完整 state 樹。

Middleware 中間件

Paste_Image.png

  • 函數式編程思想設計,redux 提供了 applyMiddleware 這個 api 來加載 middleware,applyMiddleware 會對 logger 這個 middleware 進行層層調用,動態地對 store 和 next 參數賦值。
  • * 給 middleware 分發 store*
  • compose組合串聯 middlewares
  • 在middleware 中調用 store.dispatch() 和在其他任何地方調用效果是一樣的,而在 middleware 中調用 next(),效果是進入下一個 middleware;
    在 middleware 中使用 dispatch 的場景一般是:接受到一個定向 action,這個 action 並不希望到達原生的 dsipatch,存在的目的是爲了觸發其他新的 action,往往用在異步請求的需求裏。

Droidux

Paste_Image.png

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章