[总结]redux在react-native中的应用

资料

• redux git地址
• redux 中文文档
• es2015(es6) babel教程
• awesome redux
• react-redux
  

我的理解

redux项目的动机是维护state(这个状态理解为UI状态，服务器数据，dom效果)，设计之初的基本原则为

1. 单一数据源，说明他的所有的state都存在的一个树形结构中。
2. state只读，说明以后再使用中不要改变state。
3. state 只能通过action进行更改，

这三个原则主要体现了设计思想，有这些作为实践指导，更加的容易理解redux.

因为我了解redux是通过react-native ,所以我的学习思路是如何在react-native中使用。可能不会涉及太多其他应用的使用（其他应用我也不会...）

Let's go

在开始之前，需要先整理下redux的基础概念。

1. Action ，动作 ，只有通过action才可以触发修改state 。action可以理解为一个动作的标示.json对象表示, 必须提供type .例如
   { type: 'ADD_TODO', text: 'Build my first Redux app'}
2. Reducer ,这个词 英语是减速器，根本无法理解嘛，我也不知道为什么现在这个词这么火，有知道的可以告诉我。我的理解就是，应该跟hadoop中的mapper,reducer差不多吧，mapper负责生成一个个key,value格式，reducer 负责混淆了，排序啦，等等处理。这个词在这里也是负责如何改变state状态。他是一个处理函数，形式如
   (previousState, action) => newState
3. Store ,仓库，顾名思义，state需要保存在一个地方吧，就是这里了。
4. Middleware，这里介绍下中间件，一般使用的中间件为

* [redux-logger](https://github.com/evgenyrodionov/redux-logger) 日志记录
* [redux-thunk](https://github.com/gaearon/redux-thunk) 支持异步请求
* [redux-promise](https://github.com/acdlite/redux-promise)

5. Others

* combineReducers 合并reducer

终于可以开始了

上面介绍的知识redux的知识，下面才是重头戏，因为学了这些，你还是无法再react-native中使用。好尴尬~ 慢慢来~

1. 初始化一个react-native 项目
   react-native init redux-sample
npm install --save redux redux-logger redux-promise redux-thunk react-redux
react-native run-android
2. 创建一个保存state的仓库吧,纳尼~ redux 中的 createStore 必须要传递reducer，好吧，如果想要创建reducer，就要好好规划下，因为reducer 需要接受action.看起来我是搞错顺序了。这里需要一个场景，规划action reducer 最后才能创建store.
   假设一个场景，一个文本,默认文本为0，点击之后+1，好吧。就简单点吧，我也是新手

QQ图片20161009222051.png

好吧，结果是失败！！

1. 首先ReduxSample初始化时候有state，但是点击之后就获取不到了。这里缺少一个this._onPress.bind(this)需要把当前上下文绑定点击之后才可以获取到state。
2. 但是点击怎么无法触发dispatch事件呢？因为在react-native中使用redux ，需要 react-redux ,上面已经安装过了，这里提到两个核心概念Provider connect这里有一些需要注意的事项
   • Provider 需要在应用外层包裹
   • Store 需要在初始化时候创建 ，不然无法配置provider
   • connect 包装组件，connect(selector)(App),包装之后则当前this.props 中拥有了dispatch.通过selector把store中的state注入到this.props中，注意：不能在根对象registerComponent注入，

那我们梳理下： 在react 应用中，需要通过redux 控制state ，那么一个动作，或者远程数据如何影响到视图呢？ 触发action之后，reducer进行处理，更新state树形结构，之后通过connect(selector)把最新的state数据传递给组件this.props，视图更新。

在写这段代码时候，一定注意reducer中switch ...最好有一个default 返回，这样前面就不用判断了。下面附上部分代码

QQ图片20161009235109.png

QQ图片20161009235113.png

扩展

通过查看一些开源项目发现创建store时候一般都需要加几个中间件，异步请求，日志，可以参考 redux-logger 中的实例

import { applyMiddleware, createStore } from 'redux';
import thunk from 'redux-thunk';
import promise from 'redux-promise';
import createLogger from 'redux-logger';

const logger = createLogger();
const store = createStore(
reducer,
applyMiddleware(thunk, promise, logger)
);


关于redux 官方推荐的其他第三方插件我还没有使用过。比如redux-actions
还有关于调试比如Redux DevTools Extension
remote-redux-devtools remote-redux-devtools-on-debugger 在react-native中一直没有配置成功,有人有时间配置成功了可以告诉我声哈。