前言
在MVVM框架模式独揽天下的今天，React凭借其独特的设计思想，深入的设计理念，开辟了一条崭新的康庄大道，实属是一个重大的突破，为什么这么说呢？因为React论其设计思想，充其量只是MVVM种的V而已，对于大量而且复杂的数据来讲，自身处理上显得有些力不从心，这时候，传统的Redux和Flux的设计思想起到了决定性的作用，对于Redux和Flux这里不多赘述，这个观念在这两年被炒的异常火热，网上我们可以搜到很多的资源，最重要的是，单向数据流的观念越来越被众多的开发者应用于项目架构之中，一定程度上来讲这种设计思想，很大程度上提升了应用的性能，对此我就来谈谈我再React项目中的应用实践以及相应的观点。
react-redux分析
其实，Redux和React两个框架之间并没有绝对的联系，他们都是独立的JS框架，一个出于View层，一个用于state管理，两者之间可以相互使用，但是API融合度并不是很高，使用起来不是特别的方便，于是便有了React-redux, 借助react-redux这个库提供一些封装，一种更科学的代码组织方式，让我们更舒服地在React的代码中使用Redux。
react-redux主要提供的常用接口有：
provider: Provider这个模块是作为整个App的容器，在你原有的App Container的基础上再包上一层，用于传递props。
connect:连接Redux和React。
Store的作用与分析
store翻译过来讲就是存储，这个模块有redux提供，而不是react-redux, 主要用于存储应用所有的state。类似于一个大的临时存储数据库。
创建代码也很简单：
....
import { applyMiddleware, createStore, compose } from 'redux';
....
const store = createStore(reducers, undefined, middlewares);
.....
.....Action的作用分析
action顾名思义就是各种操作，对于redux来讲，view的每一种处理都会对应一种操作，每个action的定义也很简单，主要变量是一个type，定义了当前action是处理什么的。
view ==> dispatch ===> action
通常，也有开发者会在action中访问请求数据，比如http数据请求等等。
看下代码：
const loginAction = (data) => {
return {type: LOGIN_REQUEST, payload: data}
}上面这个action可以通过dispatch进行分发处理到对应的reducers.
Reducer的作用
上面讲到action会定义各种操作，比如登陆，验证等等，那么接下来数据会怎么处理，进一步更新state呢？
这就要提到reducer的作用了，reducer主要处理各种数据逻辑，筛选，过滤等操作，处理完成后，会返回一个新的state，在更新到view上显示。
所以reducer的作用，在整个环节还是至关重要的。
我们看一个reducer的代码：
import { handleActions } from 'redux-actions';
import * as types from './word-constants';
import { combineReducers } from 'redux';
const getJokesList = handleActions({
[types.SUCCESS_FETCH_DATA]: (state, action) => {
state = action.payload;
console.log(action.payload);
return [...state];
}
}, []);
export default combineReducers({getJokesList});上面代码中，我们暂且不管handleAcions的作用，主要看state的处理，这里传递给state一个新的数据，最后通过拓展运算符…返回。
当然这只是一个例子，真实项目中可能要处理很复杂的数据结构。
applyMiddleware分析
redux在react的项目中，角色主要是数据管理，既然是数据管理，就是多少会有点中间件的意思，所以也有很多人说，redux在react项目架构中就是一个中间件的角色，这个我很赞同，因为redux真的提供了各种丰富的中间，方便我们使用，那么应用这些中间件，就需要applyMiddleware来实现了。
我们来看看：
...
const middlewares = compose(applyMiddleware(sagaMiddleware, thunk, logger), autoRehydrate());
const store = createStore(reducers, undefined, middlewares);
...上面主要应用了三个中间件，thunk, saga, log.
下面我们会依次讲解。
常用中间件
redux的中间真的很多，但是本人没有一一尝试，对于在项目中我比较常用的，这里和大家分享一下。
react-thunk分析
这个中间件在网上会看到很多资料，说的很高大上，最开始我也云里雾里，但是究其根本，用它就一个好处： 方便在action中接收dispatch和getState两个参数，也就是我们不需要在触发action时候传递这两个参数，我们就能获取到。
主要是因为react-thunk会在异步处理中默认传过来，以便于我们在action中进一步dispatch其他的操作。
看一下代码：
/**
* Created by Richard on 12/20/16.
*/
import { createAction } from 'redux-actions';
import { GET_CONTACTS } from './constants';
import { SAVE_DATA } from './constants';
import fetch from 'isomorphic-fetch';
export const getContacts = createAction(GET_CONTACTS);
export const saveData = createAction(SAVE_DATA);
export const getData = () => (dispatch, getState) => {
fetch('http://offline-news-api.herokuapp.com/stories')
.then(function(response) {
if (response.status >= 400) {
throw new Error("Bad response from server");
}
return response.json();
})
.then(function(stories) {
console.log(stories);
dispatch(getContacts(stories));
});
}
reselect分析
我认为这个reselect其实算不上redux的中间件，因为他不来源于redux。但是这个插件和redux配合使用，在项目中的确带来很多好处。
reselect主要用于分析处理reducer传递过来的state, 并且判断当前的state和上一个state是否为同一个，同一个即不刷新页面，在一定程度上有助于提高效率。
而且在进一步处理state的业务逻辑上， 也提供了一些action，可以方便的处理不同模块下的state关系。
看一下代码：
/**
* Created by Richard on 1/11/17.
*/
import { createSelector } from 'reselect';
export const getAllItems = createSelector(
[
state => state.word.getJokesList,
],
(items) => {
return items;
}
);还有很多语法，需要大家自己摸索一下啦，很好用。
redux-actions分析
redux-actions这个顾名思义就是集中处理所有action的，方便使用，即简化了代码，主要会应用到action和reducer中，在action中创建，在reducer中接收。
我们看一下代码：
/**
* Created by Richard on 12/30/16.
*/
import { createAction } from 'redux-actions';
import * as types from './word-constants';
export const successFetchData = createAction(types.SUCCESS_FETCH_DATA);
/**
* Created by Richard on 12/29/16.
*/
import { handleActions } from 'redux-actions';
import * as types from './word-constants';
import { combineReducers } from 'redux';
const getJokesList = handleActions({
[types.SUCCESS_FETCH_DATA]: (state, action) => {
state = action.payload;
console.log(action.payload);
return [...state];
}
}, []);
export default combineReducers({getJokesList});
代码中，我们用createAction创建一个action，以便省略了type参数，与此同时，会自动生一个一个payload参数用于传递数据到reducer中。
同样在reducer中我们可以使用handleAction接收对应的action。
redux-saga分析
对于中型项目来讲，我们需要处理很多业务逻辑，因为js没有多线程而言（排除webworker）. 大多数都是异步回调处理，所以复杂的异步多少让你的代码杂乱，redux-saga主要作用在于处理各种复杂的异步操作，从而减少代码量，简化action的操作。
看一下代码：
/**
* Created by Richard on 1/11/17.
*/
import { call, put, take, select } from 'redux-saga/effects';
import { get, getPicturesUrl } from '../../../utils/api';
import { successFetchPictureData } from './picture-list-actions';
import * as types from './picture-list-constants';
export default function* pictureFlow() {
try {
yield take(types.START_FETH_PICTURE);
const data = yield call(get, getPicturesUrl());
yield put(successFetchPictureData(data));
} catch (e){
}
}对于saga的更多信息，欢迎大家阅读我写的saga应用一篇文章。
http://blog.csdn.net/jiangbo_phd/article/details/54026751
总结
单对Redux而言，每一个框架都是一个故事，都值得我们仔细品味，无论从代码简化上，还是后期维护上，都起着至关重要的作用，弄清楚每个框架的功能和作用，才能更好的在架构中加以设计。