react系列筆記:第一記-redux
前言:
目前公司使用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