react-native (四 - 上) : redux

我们之前已经学习了组件，搭建了界面，并且知道了一个app界面应该如何实现界面之间的跳转，似乎一个app的基本流程我们可以走通了。其实你猜想的没错，一个简单的app流程确实就是这么的简单。可惜现实中我们的app现在涵盖的功能越来越多，甚至有一些复杂的功能需要缓存和界面恢复，或者是不是那么单纯直接的处理我们的界面间的关系，这个时候我们就会寻求一个新的通用的解决方案。

那现在就介绍react-native 的状态容器管理方案 --- Redux文档看这里

redux叫状态管理，这个名字有点身份，对于初期来说你完全可以把他理解成全局变量的管理。我们用一个小例子来解释这个全局变量是什么东西，你当前有一个home界面里面包含了用户的基础信息（姓名及电话），但是很显然这个信息是需要你用户登录之后才能从api得到的。那么我们流程 登录----> api返回登录数据---->登录数据缓存---> 跳转home界面--->  展示缓存的数据。 这是个很明显的流程，我们得到了我们缓存的（也就是全局变量）数据name和phonenumber，然后进行界面展示。 

你以为这个就是我们用Redux的理由？保存一个需要展示的数据我们就需要缓存来做状态管理？no,no,no,no.真正的app可能就name和phonenumber会有个人信息中心的数据展示，name和phonenumber的修改，周边功能的关联展示，或者一些周边功能的逻辑判断(比如电话号码的运营商判定),这么多的地方可能用到这两个数据，你还不好好的去对待它们么？

说了这么多其实是为了让你好好重视它，而解决方案其实有很多种。

存文件:文件存储

存数据库：轻量级数据库存储

但是自然这些都不是最好的解决方式。我们还是来看Redux吧！！！你会慢慢感受到它才是最好的。

一句话概括Redux

它就是一个适用于react-native的管理全局变量的规范方案!!

(默认大家还是看了下官网=.= 如果没有看请传送门，如果看过只是熟练请只看进阶)

Redux有三部分组成 store,action,reducer

store

整个应用的 state (状态，也就是我们所谓的全局变量)被储存在一棵 object tree 中，并且这个 object tree 只存在于唯一一个 store 中。

或者这么说 store 的职责有这些：

1.维护整个应用的 state

2.提供 getState() 方法获取 state；

3.提供 dispatch(action) 方法更新 state；

4.通过 subscribe(listener) 注册监听器。

这么解释一下，整个应用的 state (状态，也就是我们所谓的全局变量)都储存在 store 中，容器组件(Component)可以从 store 中获取所需要的状态。

容器组件同时也可以发送给 store 一个 action，告诉他改变某个状态的值，所以说容器组件只要发送一个指令，就可以叫 store 去 setState，然后 store 的 state 改变，回过来容器组件获取到的 state 改变，导致 views 的更新。

action

Redux下的action 可以理解为一种指令，store 数据的唯一由来就是 action，action 是一个对象，它需要至少一个元素，type，type 是这个指令的唯一标识，其它元素是传送这个指令的 state 值

{

type: ACTION_TYPE,

text: “content”, （我现在store中存储了一个state，这个state中有一个“全局变量”叫text）

}

这个指令由组件触发，然后传到 reducer。

reducer

action 只是说明了要去做什么，和做这件事情需要的参数值。

具体去改变 store 中的 state 是由 reducer 来做的。

reducer 其实是一个包含 switch 的函数，前面不是说组件触发的 action 会传递到 reducer，reducer 接收这个参数 action，他通过 switch(action.type) 然后做不同操作，前面说了，这个 type 是指令的标识，reducer 根据这个标识来作出不同的操作。

这个操作是什么呢？

reducer 还接收另一个参数 state，这个是旧的 state。从 action 里面还可以获取到做这个操作需要的 参数值。

这个操作其实就是对原有的 state 和 从 action 中的到的值，来进行操作（结合，删除，…）然后返回一个 新的 state 到 store。

上代码！转载别人的例子 简单的react+redux例子

我们先从程序的store开始看起，因为我们讲到过，整个程序只会拥有一个store，这个store包含了所有的state，我们知道了所有的全局变量了自然就对他的reducer了然了（之后还会有工具来让你对这个store拥有的state更加了然的方式）

createStore构造方法有两个参数，reducer和preloadedState(可空),我们看到代码中将一个todoReducer的对象添加进来了，恰好这个todoReducer就是我们reducer题图部分申明的对象。

继续我们来查看这个todoReducer是什么东西。这个todoReducer是一个函数别名，我们先暂且不看这个里面具体是什么，我们只需要关注我们知道todoReducer可以到哪里找代码了。

现在我们去找我们程序操作的入口，handleAdd。handleAdd做了一些逻辑，执行了store.dispatch(addTodoActions(value))  查看附录二

这个方法调用一个action，而这个action是通过纯函数AddToDoAction构造的，他返回了一个

{ type : "add_todo" , text : text }的action，而执行这个store执行这个action需要通过store中存储的reducer。通过type的筛选，我们在todoreducer中找到了一条“add_todo”的枚举，更新了state