React-native项目集成Rudux框架初阶

推荐阮一峰老师的文章：

http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html

RN的UI是根据相应组件的state进行render的，而页面又是由大大小小的组件构成，导致每个组件都必须维护自身的一套状态，因此当页面复杂化的时候，管理state会相当吃力的。而redux提供了一套机制来组织管理整个应用状态。

Redux有三部分组成：store，action，reducer。

store:维护全局的state，以及将action和reducer结合起来。

action：用来传递state的信息。（比如：我们在action中处理登陆操作，将返回的user对象传递给对应的reducer.）

reducer:reducer是简单的处理函数，通过传入旧的state和指示操作的action来更新state，从而达到页面的刷新。

使用的三原则

1, Single source of truth

单一数据源。整个应用的state，存储在唯一一个object中，同时也只有一个store用于存储这个object.

2, State is read-only

状态是只读的。唯一能改变state的方法，就是触发action操作。action是用来描述正在发生的事件的一个对象。

3, Changes are made with pure functions

在改变state tree时，用到action，同时也需要编写对应的reducers才能完成state改变操作。

1.安装redux框架相应的库：

安装redux:npm install --save redux

安装redux绑定库:npm install --save react-redux

安装开发者工具:npm install --save-dev redux-devtools

安装异步action构造器:npm install --save redux-thunk

2.mapStateToProps方法：根据全局state返回当前页面所需的数据然后以props的形式传递给当前页面（Login）。

mapDispatchToProps：该方法就是将dispatch和当前页面引入的actionCreators绑定在一起，然后就可以轻松调用。

3.简单总结

1.首先我们创建全局的store（基于所有的reducer）在APP最外层引用，然后我们创建action（可以根据页面或者某种类别来定义）。接着我们创建reducer（可以设计成跟action一一对应）。最后通过connect将它们和页面链接起来，至于action和reducer的内容，可以等页面编辑OK后再进行设计。

2.执行简单流程：在页面中首先调用对应action方法（传递参数）--->执行相应的业务逻辑，然后调用dispatch(action)（将结果以action的形式传递给reducer）--->在reducer中根据type字段然后返回最新的state，然后在进行render具体的ui。

推荐文章：http://www.jianshu.com/p/2c43860b0532