使用Redux的原因:react数据是单项流动的,想在不同的组件间传值极为不便,组件传值可参考之前的博客,要在不同的页面间组件传值根本无法做到,所以通过一种方式来实现对state的统一的管理,那就是Redux。
当然在Redux以前有Flux,两者本质上都是管理state,但区别很大,在这里具体不在详述,可以自己查找相关对比博客。
本文只是自己的阅读代码后的总结,具体的项目可通过这里下载
首先要说的是Redux的流程图:
关于Redux有三点需要注意:
- 所有的state构成一棵obj tree,这棵树只存在于唯一的store中;意思就是说只有一个store去管理数据,所有的操作必须和这一个store交互
- 所有的state都是只读的,唯一可以改变他们的方式是action
- 使用纯函数来执行修改,以保证每次对状态的执行结果一致,这里的纯函数就是reducer,如上图所示所有的Ruducer组成了Reducers
流程如下:
- 由用户操作产生action(如点击操作等),这些action不可以直接到达reducers,需要通过dispatch函数分配过去
- Reducers是所有rdeucer的集合,因为一个事情可能一个reducer搞不定,那么需要多个来配合执行,但是他们又是分开定义,所有需要用combineReducers将他们结合起来去处理一个事情
- Reducers是有特定的定义方式的,不可或缺的是type属性,通过不同的type关键字去实现对store的不同操作
- 操作完成state重新渲染UI,实现更新
项目得具体的代码如下:第一步是去生成一个store,store里面包含多个reducer,所以:
reducer定义:
然后通过combineReducers打包成reducers
然后创建store,通过Provider将store提供给组件
然后定义action
有了action就需要定义调用的分配器dispatch,这里用到了connect
connect方法声明:
connect([mapStateToProps], [mapDispatchToProps], [mergeProps],[options])
作用:连接React组件与 Redux store。
最后才是页面的定义:
以上为项目的实现代码,项目是别人呢的,我只是下载下来学习一下,有不懂的问题可以访问
博客:https://www.jianshu.com/p/9873d4ccb891
里面的讲的很细致,但是也有好多东西没有表达清楚,还是得自己做项目好好理解才可以完全搞懂这些东西!