[2017-02-17 Update，github上代码的RN版本已更新至最新版本(0.41.2)，如有问题请提issue，3Q]
redux是什么?
redux是一个用于管理js应用状态的容器。redux出现时间并不是很长，在它出现之前也有类似功能的模块出现，诸如flux等等。redux设计的理念很简单，似乎最初这个开发团队就有让redux可以方便融入在server, browser, mobile client端的打算。目前在github上redux-*的第三方中间件、插件越来越多。如果react项目中想使用redux，那么就有react-redux插件来完成配合。而作为开发者，可以使用这些优秀的第三方资源来开发/优化已有的项目，也是一件很欢乐的事。
设计的动机
在redux.js.org里有关于编写redux的动机描述(our code must manage more state than ever before)，在现实的生活中，单页应用越来越多，而且需要维护的状态也越来越复杂，诸如维护数据更新、UI更新、本地数据存储等这些都是我们在js应用常常需要处理的情景，当然这里多数都会涉及到异步处理。而redux本身就是为了解决这些问题，而是将所有的变化进行统一流程处理，会使我们的程序状态变化清晰可见。redux最终目的就是让状态(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改变操作。
在上面的三原则中，我们看到了store, action, reducer这些词，那就先说说redux是怎么进行应用状态(state)维护管理的呢。
redux状态管理的流程
action是用户触发或程序触发的一个普通对象。
reducer是根据action操作来做出不同的数据响应，返回一个新的state。
store的最终值就是由reducer的值来确定的。（一个store是一个对象, reducer会改变store中的某些值）
redux流程.png
上图简单画了下redux状态改变的流程。action -> reducer -> 新store -> 反馈到UI上有所改变。
下面再给个具体实例：
redux登录实例.png
store用于维护状态的容器，包括了应用的多个状态，比如说用户是否登录、用户信息、用户任务等等。action是一个普通对象，用于指明是哪种操作，这样才能在reducers中进行识别。而众多reducer是负责返回新的state的函数。在实际应用中，你需要将store或store的某个值绑定到界面，这样更新store的时候，该页面可以监听到值的更新，然后进行一些页面更新操作/跳转操作等。
redux在实际使用中需要用到的高级部分
redux设计如此简洁，以至于并没有进行异步处理的功能。但是留下了middleware这个概念。可以自己编写符合需要的中间件。目前第三方的中间件基本可以完成一个复杂应用的架构设计。那就先说一说，怎么去处理异步请求呢。
首先推荐redux-thunk，可以看到它的源码很简洁。就是判断action是否是函数，如果是函数进行递归式的操作。所以在redux中的异步，只能出现在action中，而且还需要有中间件的支持。
export default function thunkMiddleware({ dispatch, getState }) { return next => action => { if (typeof action === 'function') { return action(dispatch, getState);
} return next(action);
};
}// redux-thunk的源码同步action与异步action最大的区别是：
同步只返回一个普通action对象。而异步操作中途会返回一个promise函数。当然在promise函数处理完毕后也会返回一个普通action对象。thunk中间件就是判断如果返回的是函数，则不传导给reducer，直到检测到是普通action对象，才交由reducer处理。
实例说说redux的使用。
实例代码在github上查看地址。该实例只演示了登录过程，是比较基础的redux使用案例。
目录结构
项目相关代码均在js目录下。目录中可以看到actions, reducers, store等子目录。
实例action
actions/user.js
actions/user.js目录中定义了用户登录操作的action creator：
第22行的
logInlogIn是一个异步action，注意函数内部的写法与redux-thunk的定义要相同。第38行的
skipLogin第47行
logOut
这些creator，产生的action状态有LOGGED_DOING,LOGGED_IN,LOGGED_ERROR,LOGGED_OUT四种状态。
第8行变量testUser, 第15行变量skipUser分别是模拟针对普通登录成功后(这里用的是fetch www.baidu.com，真实情况下需换成真实的登录接口)的用户对象，跳过登录后默认的用户对象。
接下来再看看reducers怎么去处理这些action?
实例reducer
reducers/user.js
reducers/user.js中：
第5行的
initialState定义了最开始的应用状态（即用户未登录的情况下的state）。第13行，对每个传过来的
action进行switch，每个action都需要返回一个state对象，如果不需要变动，则返回原对象（switch中的default返回值）。需要变动，则返回一个新的state, 可以看到当type为LOGGED_DOING,LOGGED_IN,LOGGED_OUT时，返回的对象跟原始对象都会有一些字段的差别。
reducers/index.js
reducers/index.js中：
第5行
combineReducers是将应用的state进行组合。目前demo中只有用户信息，所以只看到第6行
userStore这一个key，在一个业务复杂的应用里，需要保存很多应用和用户交互产生的信息（比如说用户聊天列表等信息）。
实例store
再来看看store的处理：
store/index.js
store/index.js中定义了store的行为（包括中间件）:
第23行的
applyMiddleware会将中间件应用在redux action过程中。第10行自定义一个
logger中间件，该中间件的目的是打印出当前的触发的action以及出发后的state变化。第27行，33行 使用了
redux-persist这个第三方插件来将store对象存储到本地，以及从本地恢复数据到store中，比如说保存登录信息，下次打开应用可以直接跳过登录界面。
程序入口
上面是定义。下面再来看如何在程序中使用：
程序入口index.js
在入口文件index.js中：
第27行，需要将
store作为属性传递给Provider组件中。第28行，可以看到的是真正渲染出的东西是
<Root/>标签返回的东西。
那就来看看root.js里的内容。
root.js
root.js中：
第48行的
render主要实现了Navigator导航器的处理，并用自定义的一个Router（第27行）进行封装了下。第59行，在末尾的
select函数，是将store中的某些值复制到当前组件的props中，注意这里需要用connect函数进行绑定，否则store变化，不会反馈到Root组件中。isLoggedIn这个变量便被复制到当前的Root组件中，在Root内部方法中可以访问。第16行，
constructor里，会对登录状态进行判断，如果检测到已经登录了，则会修改Navigator初始的路由设置（第10行设置的），使应用直接显示MainPage。
登录页面。
那再看看登录页面pages/login.js中的用户操作：
pages/login.js - 1
pages/login.js - 2
pages/login.js - 3
上面的3个图片是整个pages/login.js的源码。
第160行，指定了该组件会与
store的哪些值进行连接。分别是isLoggedIn,user,status。第129行，定义了
Text的onPress操作。handleLogin是绑定的操作方法，方法内容见第60行。在71行时，会触发logIn这个action。触发
logIn后，会先进入LOGGED_DOING状态，此时说明在登录中。在第42行，有对该状态进行监听，如果为该状态，会将弹窗弹出，提醒为loading态。第33行，在
shouldComponentUpdate中，对即将变化的nextProps进行与目前的props进行对比。比如说logIn执行登录完成后，第35行检测到isLoggedIn为true，则执行toMain函数（即跳转到主页中）。
看下最终的demo交互效果。
demo交互效果
作者：巨巨
链接：https://www.jianshu.com/p/2c43860b0532
共同学习，写下你的评论
评论加载中...
作者其他优质文章
