[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