资料
我的理解
redux项目的动机是维护state(这个状态理解为UI状态，服务器数据，dom效果)，设计之初的基本原则为
- 单一数据源，说明他的所有的state都存在的一个树形结构中。
- state只读，说明以后再使用中不要改变state。
- state 只能通过action进行更改，
这三个原则主要体现了设计思想，有这些作为实践指导，更加的容易理解redux.
因为我了解redux是通过react-native ,所以我的学习思路是如何在react-native中使用。可能不会涉及太多其他应用的使用（其他应用我也不会...）
Let's go
在开始之前，需要先整理下redux的基础概念。
-
Action ，动作 ，只有通过action才可以触发修改state 。action可以理解为一个动作的标示.json对象表示, 必须提供type .例如
<code>{ type: 'ADD_TODO', text: 'Build my first Redux app'}</code> -
Reducer ,这个词 英语是减速器，根本无法理解嘛，我也不知道为什么现在这个词这么火，有知道的可以告诉我。我的理解就是，应该跟hadoop中的mapper,reducer差不多吧，mapper负责生成一个个key,value格式，reducer 负责混淆了，排序啦，等等处理。这个词在这里也是负责如何改变state状态。他是一个处理函数，形式如
<code>(previousState, action) => newState</code> - Store ,仓库，顾名思义，state需要保存在一个地方吧，就是这里了。
- 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)
- Others
* combineReducers 合并reducer
终于可以开始了
上面介绍的知识redux的知识，下面才是重头戏，因为学了这些，你还是无法再react-native中使用。好尴尬~ 慢慢来~
- 初始化一个react-native 项目
<code>react-native init redux-sample</code>
<code>npm install --save redux redux-logger redux-promise redux-thunk react-redux</code>
<code>react-native run-android</code> - 创建一个保存state的仓库吧,纳尼~ redux 中的 <code>createStore</code> 必须要传递<code>reducer</code>，好吧，如果想要创建<code>reducer</code>，就要好好规划下，因为<code>reducer</code> 需要接受<code>action</code>.看起来我是搞错顺序了。这里需要一个场景，规划<code>action reducer </code> 最后才能创建<code>store</code>.
假设一个场景，一个文本,默认文本为0，点击之后+1，好吧。就简单点吧，我也是新手
QQ图片20161009222051.png
好吧，结果是失败！！
- 首先ReduxSample初始化时候有state，但是点击之后就获取不到了。这里缺少一个<code>this._onPress.bind(this)</code>需要把当前上下文绑定点击之后才可以获取到state。
- 但是点击怎么无法触发dispatch事件呢？因为在react-native中使用redux ，需要 <code>react-redux</code> ,上面已经安装过了，这里提到两个核心概念<code>Provider connect</code>这里有一些需要注意的事项
- Provider 需要在应用外层包裹
- Store 需要在初始化时候创建 ，不然无法配置provider
- connect 包装组件，<code>connect(selector)(App)</code>,包装之后则当前this.props 中拥有了dispatch.通过selector把store中的state注入到this.props中，注意：不能在根对象<code>registerComponent</code>注入，
那我们梳理下： 在react 应用中，需要通过redux 控制state ，那么一个动作，或者远程数据如何影响到视图呢？ 触发action之后，reducer进行处理，更新state树形结构，之后通过connect(selector)把最新的state数据传递给组件this.props，视图更新。
在写这段代码时候，一定注意reducer中switch ...最好有一个default 返回，这样前面就不用判断了。下面附上部分代码
QQ图片20161009235109.png
QQ图片20161009235113.png
扩展
通过查看一些开源项目发现创建store时候一般都需要加几个中间件，异步请求，日志，可以参考 redux-logger 中的实例
<code>
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)
);
</code>
关于redux 官方推荐的其他第三方插件我还没有使用过。比如redux-actions
还有关于调试比如Redux DevTools Extension
remote-redux-devtools remote-redux-devtools-on-debugger 在react-native中一直没有配置成功,有人有时间配置成功了可以告诉我声哈。
网友评论