[toc] ## createStore() createSotre接收一個參數`reducer`和另外一個參數作為`state`的初始狀態。（不過，我們一般在reducer中設置初始狀態） ### getState() ``` let getState = () => JSON.parse(JSON.stringify(state)); //獲取轉改的方法 阻止對本源數據進行修改 ``` ### dispatch() 派發動作，它接收一個參數，是一個`action`對象，這個對象會被傳遞給`reducer`進行解析。 #### anction action是一個對象，像這樣`{type:CHANGE_TITLE_TEXT,text:'長標題'}` ##### type `type` action對象里的第一個屬性，它的作用是被用來在`reducer`中進行匹配，告訴reducer這個動作是要更改倉庫中哪一部分的狀態。 ##### payload action對象里除卻type屬性的其它屬性，都被稱之為`payload`->載荷。它是用來告訴`reducer`怎么改變狀態的。 #### anction-creator 是一個個函數，每個函數會返回一個`action`對象。 action-creator可能會接受N個參數，主要提供不同的載荷參數供action-creator創建動態的`action對象`。 #### actions `actions`是一個對象，對象中存儲著屬于一個組件的所有的`action-creator`。 #### 【reducer】 調用reducer后會返回一個新的狀態 調用`dispatch`方法后，會在dispatch方法內部調用reducer方法(createStore時接收的參數)，這個方法接收兩個參數 - state 該倉庫的**所有狀態** - action 此次派發所接受的action對象 reducer正常項目中一般會由多個`子reducer`組成。每一個子reducer對應一個組件，這個reducer是該組件的狀態管理員。一個組件要想改變它自己的狀態，需要通過它自己的管理員。 ##### combineReducer 該方法接收一個對象作為參數，這個對象囊括了所有子reducer ``` //combineReducers {counter:{number:0},todo:[]} let combineReducers = (reducers) => { // //返回一個新的reducer return (state={},action) => { //第一次state={}，第二次state={counter:{...},todo:{....}} let obj = {}; //最終的狀態 for(let key in reducers){ obj[key] = reducers[key](state[key],action) //obj.counter={number:0} //一個子動作會在所有子reducer中走一圈 } return obj; }; }; ``` **注意:** 當你派發一個動作時，這個動作會被傳遞進各個子reducer直到被匹配上，而不是直接命中一個子reducer再進行匹配 ##### cb 當派發一個動作后，會調用reducer，除此之外還會執行訂閱 ``` function dispatch(action) { //派發 state = reducer(state, action); listeners.forEach(cb => cb()); } ``` ### subscribe() 訂閱一個會在dispatch后執行的回調 #### 關于redux在react中的運用 一個react組件想要更新 無非兩種情況 - 調用`setState`更新狀態 - 作為子組件，父組件改變了傳遞給自己的state `react-redux`使用的是第二種方式 ## connect connect是一個高階函數需要`()`運行兩次 ``` export default connect(mapStateToProps,mapDispatchToProps)(Counter); ``` 第一次運行時接收兩個參數，這兩個參數通常來說都是方法 ``` connect執行時有兩個參數 1.mapStateToProps 將redux中的狀態映射成Counter上的屬性 2.mapDispatchToProps 將dispatch映射成Counter上屬性 3.這兩個個函數的返回值會作為當前組件的屬性 ``` ### mapStateToProps 接收一個state參數，所有組件的state？ ``` let mapStateToProps = (state) => { //這個函數的參數是state // return {n1: state.counter.num}; //{...state.counter} => {number:0} return {...state.counter} }; ``` ### mapDispatchToProps ``` let mapDispatchToProps = (dispatch) => { //這個函數接收的參數是dispatch return { add:(count)=>{ dispatch(actions.add(count)); } ,minus:(count)=>{ dispatch(actions.minus(count)); } } }; ``` #### 你也可以直接將`actions`對象作為參數傳入替代`mapDispatchToProps`函數 這樣做是因為，react-redux系統仍然會將這個`actions`對象轉換為`mapDispatchToProps`函數 ``` let bindActionCreators = (actions) => { // 為什么可以直接傳入一個actions，在內部會調用這個函數進行包裝 return (dispatch) => { let obj = {}; for(let key in actions){ obj[key] = (...args)=>{ dispatch(actions[key](...args)); } } return obj; }; }; ``` ## @connect