Redux使用总结

使用Redux的原因:react数据是单项流动的,想在不同的组件间传值极为不便,组件传值可参考之前的博客,要在不同的页面间组件传值根本无法做到,所以通过一种方式来实现对state的统一的管理,那就是Redux。

当然在Redux以前有Flux,两者本质上都是管理state,但区别很大,在这里具体不在详述,可以自己查找相关对比博客。

本文只是自己的阅读代码后的总结,具体的项目可通过这里下载

首先要说的是Redux的流程图:

                   

关于Redux有三点需要注意:

  1. 所有的state构成一棵obj tree,这棵树只存在于唯一的store中;意思就是说只有一个store去管理数据,所有的操作必须和这一个store交互
  2. 所有的state都是只读的,唯一可以改变他们的方式是action
  3. 使用纯函数来执行修改,以保证每次对状态的执行结果一致,这里的纯函数就是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

里面的讲的很细致,但是也有好多东西没有表达清楚,还是得自己做项目好好理解才可以完全搞懂这些东西!

猜你喜欢

转载自blog.csdn.net/u013455430/article/details/86506230
今日推荐