React——redux与react-redux

redux 与 react-redux 直接一起使用， 让我总分不清楚这两个各自的职责，分别整理一下。

reudx

                 

                                                                                         redux.jpg

 

对于redux 整个过程如上所示。

1. 用户在UI组件中通过 store.dispatch触发action ；

2. store 自动调用reducer，并传入之前的state，以及1中用户的action， 经过reducer返回新的state；

3. store.subscribe(listener) 订阅state的变化，可通过setState更新react UI。

redux 整个设计是： 所有你“写”的逻辑都集中在一个单独的函数（reducer）中，并且执行这些逻辑的唯一方式就是传给 Redux 一个能够描述当时情景的普通对象（action）。Redux store 调用这些逻辑函数，并传入当前的 state tree 以及这些描述对象，返回新的 state tree，接着 Redux store 便开始通知这些订阅者（subscriber）state tree 已经改变了。

因此要求 reducer 是纯函数和可预测，不能突变。

react-redux

                  

                                                                                             react-redux.png

react-redux 主要是redux执行的第3步（标红部分）。
使用mapStateToProps订阅 Store，每当state更新的时候，就会自动执行，重新计算 UI 组件的参数，从而触发 UI 组件的重新渲染。 mapStateToProps 是输入逻辑（将state输入到react的UI中）；
mapDispatchToProps定义了哪些用户的操作应该当作 Action，传给 Store。 mapDispatchToProps是输出逻辑（将用户的操作变成action，从react的UI中发出）。

容器组件 = connect(mapStateToProps,mapDispatchToProps)(UI 组件)；

mapStateToProps 中使用的state ，来自于provider组件中注入的store。其实现是react 的context属性。