image
在图中，使用Redux管理React数据流的过程如图所示，Store作为唯一的state树，管理所有组件的state。组件所有的行为通过Actions来触发，然后Action更新Store中的state,Store根据state的变化同步更新React视图组件。
那么Store是如何和视图绑定的呢？
在主入口文件index.js中，通过Provider标签把Store和视图绑定：
<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word;"><Provider store={store}> //项目代码 </Provider> </pre>
在项目中，Store是如何具体管理State呢？实际上是通过Reducers根据不同的Action.type来更新不同的state，即（previousState,action） => newState。最后利用Redux提供的函数combineReducers将所有的Reducer进行合并，更新整个State树。
在Redux项目中，利用Container容器组件作为桥梁，将React组件和Redux管理的数据流联系起来。Container通过connect函数将Redux的state和action转化成展示组件即React组件所需的Props。
<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word;">//将state.data绑定到相应的React组件的Props的data function mapStateToProps(state){ return { data:state.data } } //将actions的所有方法绑定到相应的React组件的Props上 function mapDispatchToProps(dispatch){ return bindActionCreators(actions,dispatch) } //通过react-redux提供的connect方法将我们需要的state中的数据和actions中的方法绑定到相应的React组件的Props上 export default connect(mapStateToProps,mapDispatchToProps)(reactComponent) </pre>
通过上面的分析，我们总结为一幅更详细的图示：
image
注册Store：
<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word;">//applyMiddleware可以包装Store的dispatch,thunk的作用是使action创建函数可以返回一个function替代action对象 const createStoreWithMiddleware = applyMiddleware(thunk)(createStore) ... ... const store = createStoreWithMiddleware(reducer,initialState) </pre>
这里可能有同学会有疑问，React的state和Redux所说的state是同一回事吗？下面我们简要分析一下：
首先，React组件的state和props定义如下：
state-只表示一些临时的、内部的状态数据，例如窗口的打开或关闭状态。
props-通常存储一些方法，一些可能需要库存的长期数据和一些需要传递的共享数据。
然后，Redux和React基本上只有2种联系：
要么React从Redux的state中读取数据，要么React通过dispatch分发action到Redux,Redux的reducer来返回一个新的state。
结论是Redux的state存放的是全局的长期数据，也就是对应的React组件的Props数据，而组件React的state应该是临时的内部状态数据，所以这两个state没有半毛钱关系。
下面我们总结一下Redux的三大原则和数据流的管理：
Redux三大原则：
1、单一数据源，这个应用的state被存储在一棵object tree中，并且这个object tree只存在于唯一的Store中。
2、state是只读的，唯一改变state的方法就是触发action，action是一个用于描述已发生事件的普通对象。
3、使用纯函数来执行修改，为了描述action如何改变state tree，需要编写reducer。
Redux数据流的管理：
1、action:把数据传递到Store，唯一数据来源。
2、reducer:action只描述有事情发生，reducer指明如何更新state，即设计state结构和action处理。
3、Store:把action和reducer联系到一起，负责维持、获取和更新state。
4、生命周期：数据流严格且单向
调用Store.dispatch(action)->Store调用传入的reducer函数，Store会把两个参数传入reducer:当前的state树和action->根reducer将多个子reducer输出合并成一个单一的state树->Store保存了根reducer，并返回完整的state树。
网友评论