资料
我的理解
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,好吧。就简单点吧,我也是新手
好吧,结果是失败!!
- 首先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 返回,这样前面就不用判断了。下面附上部分代码
扩展
通过查看一些开源项目发现创建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中一直没有配置成功,有人有时间配置成功了可以告诉我声哈。