在图中,使用Redux管理React数据流的过程如图所示,Store作为唯一的state树,管理所有组件的state。组件所有的行为通过Actions来触发,然后Action更新Store中的state,Store根据state的变化同步更新React视图组件。

那么Store是如何和视图绑定的呢? 
在主入口文件index.js中,通过Provider标签把Store和视图绑定:

<Provider store={store}>
//项目代码
</Provider>

在项目中,Store是如何具体管理State呢?实际上是通过Reducers根据不同的Action.type来更新不同的state,即(previousState,action) => newState。最后利用Redux提供的函数combineReducers将所有的Reducer进行合并,更新整个State树。

在Redux项目中,利用Container容器组件作为桥梁,将React组件和Redux管理的数据流联系起来。Container通过connect函数将Redux的state和action转化成展示组件即React组件所需的Props。

//将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)

通过上面的分析,我们总结为一幅更详细的图示:

注册Store:

//applyMiddleware可以包装Store的dispatch,thunk的作用是使action创建函数可以返回一个function替代action对象
const createStoreWithMiddleware = applyMiddleware(thunk)(createStore)
... ...
const store = createStoreWithMiddleware(reducer,initialState)

这里可能有同学会有疑问,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树。

 

最新文章

  1. 记录我学github的路程(三)
  2. 关于eclipse中DDMS中Emulator Control选项卡为灰色不可用
  3. Network - DNS
  4. 面向对象中this问题
  5. Codeforces Round #355 (Div. 2)-B
  6. 《MFC游戏开发》笔记九 游戏中的碰撞判定初步&amp;怪物运动简单AI
  7. sql分割以逗号隔开的字符串
  8. Android_sharePreference_ex1
  9. web标准(复习)--4 纵向导航菜单及二级弹出菜单
  10. hdu4393 Throw nails(只用模拟前面500来次,后面根据速度、位置、id值排序即可)
  11. ProductHunt:创业公司产品猎场和秀场
  12. 白板编程浅谈——Why, What, How(转)
  13. SSIS从理论到实战,再到应用(5)----流程控制之Foreach循环
  14. MFC通过ODBC连接Mysql程序
  15. Spring注解基本解读
  16. (简单) POJ 3076 Sudoku , DLX+精确覆盖。
  17. 纯干货!华为软件开发云编译构建之Maven
  18. 常见MQTT服务器搭建[转载]
  19. EXTJS 4.2.1.883 Summary 合计栏宽度bug
  20. Android Intent参数传递

热门文章

  1. 运算符 Operator 及优先级
  2. golang Context for goroutines
  3. WebRobot1.8.2网站多功能网络安全渗透检测工具
  4. WCF 学习
  5. Matplotlib 入门
  6. mysql性能优化及 Comparison method violates its general contract
  7. NFC性价比高频读卡器首选方案:FM17550
  8. 洛谷P2296 寻找道路
  9. jsp获取web的跟路径
  10. python基础学习(一)