1.为什么用Redux?
因为对于react来说,同级组件之间的通信尤为麻烦,或者是非常麻烦了,所以我们把所有需要多个组件使用的state拿出来,整合到顶部容器,进行分发。
2.react-router-redux
这个包里有Provider、connect。
就比如有一个大盒子(顶层容器Provider),里面有很多小盒子(组件Component),小盒子之间不能通信啊,每个盒子都有一个壳子,state穿不过去啊,于是就有connect来进行连接state和Component。
Provider作为顶层容器接受store作为参数,进行state分发,在这里,state并不是清晰的设置一个对象,所有的共享数据都在里面,而是由多个reducer组成,每个reducer有一个小的state,多个小的state就组成了一个大的state。Provider在所有Router的最外层。
connect存在于每个需要共享数据的组件里,connect方法接受两个函数:
mapStateToProps:mapStateToProps接收state和当前组件的props作为参数,mapStateToProps会在state里面取出当前组件需要的数据,映射到当前组件的props上,这就实现了顶层数据分发到组件。(这个函数是自己定义的,名字不做严格要求,实现state到props映射的功能就好了)
mapDispatchToProps:它接收dispatch作为参数,将当前组件会用到的dispatch(action)映射到当前组件的事件回调函数fun上,这里讲action换个名字注入到props里面,然后可以在组件内部调用,直接dispatch(action)就好了。
在这里解释一下bindActionCreators,这个东西是把当前组件的action传到它的子组件上的一个方法,在子组件标签上展开就好了。具体我也没用过,用到了再来补充。
上面的图片中,将两个方法直接传入connect方法中,封装的connect方法会把两个函数需要的参数注入,从而实现state和dispatch的映射。
connect方法会把dispatch函数注入到当前组件的props里面,真的,原来我都不知道dispatch从哪里引进来的。用了connect方法之后,就可以{ dispatch } = this.props;就是这样的!
3.Action
action是一个对象,有一个必要的参数type,剩下的参数key和value自定义,但是因为reducer是纯函数,所以通常的ajax请求都是在action完成的,我看最近一个项目,是在view层dispatch(action1),在action1里dispatch(action2)。上面的action1里面存在数据的请求,将请求回来的数据给action2做参数,action2是一个标准的action,因为它有type。可以触发reducer。
4.reducer
组件中触发事件,action只是一个对象而已,只有dispatch(action)才能触发reducer去修改state,那么。。。dispatch(action)之后,是怎么找到相应的reducer的?咋找到的?
看了一下源码,dispatch函数在createStore方法里面,会用到所有的reducer,所以我估计是把所有的reducer执行一遍。。。不匹配actionType的reducer就把当前的state完整不变的返回,符合的就生成一个新的state返回作为当前的state。嗯,,就是这样的。。。
然后Reducer会接受当前的state和传入的actionType判断处理state。reducer是纯函数,一样的输入必须要得到一样的输出。reducer不能修改当前的state,必须复制一份,修改这个新的,然后返回新的对象作为当前的state。
reducer这里有个辅助函数,将所有的reducer整合到一个大的reducer里,传给createStore做参数。
会把一个由多个不同 reducer 函数作为 value 的 object,合并成一个最终的 reducer 函数,然后就可以对这个 reducer 调用 createStore。
5.state
这个state很是神奇啊,每次变动state的时候都会生成一个新的state,所以内存中就会有很多不同时刻的state,