1. 程式人生 > >react系列筆記:第一記-redux

react系列筆記:第一記-redux

one 返回 func ets pro reac resolve 每一個 ddl

前言:

  目前公司使用dva,對於前不久還是使用原生js的我來說,花了差不多一兩周時間,基本掌握如何使用。雖然對於react有一點點基礎,但很多地方未深入,很多概念也很模糊,故從本文開始,記錄一下系統的學習react的歷程。

redux:(http://www.redux.org.cn/)

  簡單來看,redux基本使用就是這樣,create一個store出來,然後通過dispatch action,通過reducer來改變這個store。  

const reducer = combinReducers(reducer1,reducer2)
const sotre = createStore(reducer)//
創建store store.getState(); store.dispatch(action)

  API:

  1、createStore(reducer,initState,enhancer)

      reducer:根reducer,reducer函數接受(state,action),返回新state

      initState:初始化的state

      enhancer:

          官方說明:是一個組合 store creator 的高階函數,返回一個新的強化過的 store creator。這與 middleware 相似,它也允許你通過復合函數改變 store 接口

          參考:https://segmentfault.com/a/1190000012653724

          自己理解:強化的store creator,返回一個函數,這個函數接收(reducer,inistate,enhancer)然後再在函數內部實現對store創建過程的一個擴展。

  2、store

      store.getState();

      store.dispatch(action);

      store.subscribe(listen);

      store.replaceReducer(nextReducer)

  3、combinReducers(reducer1,reducer2)

  4、applyMiddleware(...middlewareArr):

    中間件,用於擴展redux的dispatch,每一個middleware都接收middleware(dispatch,getState),返回一個fun,函數簽名:({ getState, dispatch }) => next => action

  5、buildActionCreator

  6、compose

redux的三大原則:唯一數據源、store為只讀、純函數修改store(reducer)

異步:redux-thunk

applyMiddleware(thunk),把action變成接受dispatch和getState參數的函數,在函數內部進行異步操作,然後直接dispatch(asyncAction);

function asyncAction(){
    return (dispatch,getState)=>{
          if(getState().someCoditions){
              return Promise.resolve();
          }
          dispatch(
      makeASandwichWithSecretSauce(‘My Grandma‘)
    ).then(() =>
      Promise.all([
        dispatch(makeASandwichWithSecretSauce(‘Me‘)),
        dispatch(makeASandwichWithSecretSauce(‘My wife‘))
      ])
    ).then(() =>
      dispatch(makeASandwichWithSecretSauce(‘Our kids‘))
    ).then(() =>
      dispatch(getState().myMoney > 42 ?
        withdrawMoney(42) :
        apologize(‘Me‘, ‘The Sandwich Shop‘)
      )
    );
    }  
}

中間件:redux的中間件是在action發起的開始,到達reducer之前的擴展

react系列筆記:第一記-redux