边黎安原创 Redux 理解了你就会公众号会写小程序会写android ios react～

最新推荐文章于 2019-07-09 11:09:05 发布

置顶大神边黎安

最新推荐文章于 2019-07-09 11:09:05 发布

阅读量248

点赞数

本文链接：https://blog.csdn.net/qq_26233519/article/details/80081046

版权

Redux三个名词，Store，Action，Reducer

Store：

store是唯一的，程序中所有的state都存储在store中.store重要维持state，提供dispatch方法更新state，界面得以更新的源头就在组件调用dispatch

Action:

action描述用户做了哪些操作。比如用户进入界面要请求网络了，下拉刷新了，上拉加载了等等等这一些列操作，它会有一个ActionType(名字随意起的，就是一些列常量用于区分用户的哪种操作)进行分门别类。
Reducer
reducer处理如何更新state，本身就是个函数。通过旧的state和action来返回新的state从而更新界面

分析程序

和明显代码结构中多出来三个文件，我们下面会跟据store，action，和reducer这三个文件来串串流程。

首先是store

代码中主要注意点第五行我们导入Provider，在第十六行通过Provider将其包裹作为程序的入口，至于配置的store就看在第六行导入的文件。其实这两个文件写法基本是固定的开始不必纠结

这里值得注意的是第六行导入所有到所reducer集，所有的reducer编写都会统一放到index中。

其次是action

其实这个actionType应该归到常量包里面的，这个文件的意思就是一些用户操作的常量类型，比如这个GIRL_LIST请求妹子列表，再比如刷新，删除，reducer会根据类型去区分用户的action操作。

这个girlAction文件就是用户的一些具体操作，就像第七行的fetchGirl方法就是一个具体的action，用户想要做的一些事，这个action会在用户girl组件中被调用，也就是说用户触发这个事件。第二十行type:types.GIRL_LIST给type赋值，也就是和action进行关联，一个type对应一个action。

再其次是reducer

首先看girlReducer，有多少个模块就对应多少个reducer分类处理代码也就更简洁。第七行到第十行初始化一些初始值，比如否正在加载，初始时的数据，再看第十二行的girlReducer函数这里就是通过之前定义的actionType去处理action返回结果更新state，从而更新界面。

这个index文件就是通过combineReducers()将所有reducer组合到一块，这也就将所有reducer和store建立关联（看configureStore.js文件）

最后看girl.js

这里就是用户触发action事件的起源

这里就是就是将Gril这个组件与store相关联

这也是我练习时的一些记录和自己理解的东西，肯定有些东西理解有所偏差望指正。。。。girl代码比较多我也就不全贴出来了，具体的看DEMO吧，我已经托管到Github。