用React Native开发Android —— 使用Redux框架

前言

1.redux简介

react native是去年开始大火的一门移动开发技术，采用与web端 react.js框架类似的思想，Js与原生控件交互，使之具有原生应用的流畅与交互效果，界面绘制采用CSS式更易入门，不过最好具备一些原生的开发知识。redux与react native没什么关系，但是react native中可以使用redux统一管理繁多的state，更加系统化。

2.为什么要使用redux

• redux的本质，redux要解决的问题就是state的管理。
• 实现UI与控制分离，是一种MVC的分层思想。React扮演的是View的角色，Redux则是Controller，至于Model就是Redux Store中存储的State，不使用redux，项目的耦合性会很大。
• 便于state控制和维护。如果保留组件内部的state，那么当你在多处调用这个组件的时候，无法有效管理state的变化，而使用redux可以让state的每一次变化都是可以控制的。

Redux使用

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相关联

至此，redux框架的初次使用体验就记录到这里！

作者：xushuying0321
链接：点击这里