注意：读懂本文需要具备redux基础知识，
注明：本文旨在说明如何在实际项目中快速使用react-redux，限于篇幅，本文对具体的原理并未做分析，请参考redux官网
我一直以为我写了一篇关于react-redux的文章，昨天在翻我的博客时才发现没有。
前几天写了vue的状态管理 vuex，Vue中的状态管理器 - Vuex，讲了vue中状态管理的用法，整体感觉是很简单的，
状态和路由都是官方自己整合的，不管是文档还是用来都比较顺滑，而redux的门槛要比vuex高不少。
题外话：为什么vue这么好用你还要搞react呢，我的感觉是，vue就像qq，react就像facebook，虽然都可以社交，但是味道不一样，各有所好，
另外react-native可以做app目前vue不能，如果外包我选择vue（快），要做一个长期的网站我会用react。
说了一大堆，开始正文：
前面我写了一篇文章：快速搭建一个vue开发环境，用到了vue官方的脚手架，同样，react官方也有一个，类似功能的：create-react-app。
补充一点额外常识：vue中路由和状态管理都是官方整合的，属于官方库，而在react中，只有react！ 路由和状态管理由第三方库提供。
全局安装 create-react-app
npm install -g create-react-app
创建一个 test的项目
create-react-app test
通过这句话搭建的环境已经可以正常跑起来了，集成了webpack，和热加载，更之前vue搭建那个环境一样，不过没有路由和状态管理，
这一篇我只讲react+状态管理，路由以后单独写，或者可能不用写了，路由是很简单的，看一下就知道怎么用。
在项目目录下执行 npm run start 项目就跑起来了，尝试修改一下 src/App.js,页面辉自动重新加载。
安装redux
#说明：redux是一个通用状态管理库，可以用于任何现代化框架，比如vue，react，angular等，不局限于react，都可以直接使用redux。
在react中， 你除了可以直接使用redux外，redux针对react推出了react-redux绑定，使用起来更规范和顺滑。
本文要讲解的是 react-redux的用法，并假设你已经有了redux的基础概念。
npm install redux react-redux redux-thunk --save // redux是核心，react-redux是react的绑定，redux-thunk是异步中间件
现在假设我们网页上有三个数据需要让redux来管理，分别是 用户的信息name,sex和系统的背景颜色bgcolor。
在src下新建actions目录，在目录下面新建userAction.js文件，
在src下新建reducers目录，userReducer.js，rootReducer.js两个文件，
在src下新建store.js 文件
整个流程是这样的， view层获取store中的数据渲染页面，当在view中需要变更store中的数据的时候，就发送一个action过去，接收这个action的不是
store，而是reducer，reducer更改数据后更新state，在这个更新过程中会触发view层的渲染逻辑，然后view层重新渲染。
在一个页面中会有很多操作要更改store中的数据，每一个操作就对应一个action。
userAction.js 代码：
export const nameAction = (name) =>{ return { type: 'name', payload: name } } export const sexAction = () =>(dispatch)=>{ setTimeout(()=>{ dispatch({ type: 'sex', payload: '男' }) },2000) }
第一个action是用来更改名字的，第二个action是用来更改性别的，这两个action看起来有差异，第一个action返回一个对象，而第二个action
是一个高阶函数，返回了一个函数。
第一个action是普通的操作，发送这个action后store中的数据立马就会更新，而第二个action是用来处理异步数据的，可以把这个地方的setTimeout替换成一个
网络请求，比如我发送了一个更新资料的action，但是这个更新要从服务器动态获取，那么就只能用第二种方式，用第二种方式的前提是加载了thunk中间件，否则第二种方式会报错。
userReducer.js 代码：
let init = { 'name': '张三', 'sex': '女' } export default (state=init,action)=>{ switch(action.type) { case 'name': state.name = action.payload return {...state} case 'sex': state.sex= action.payload return {...state} // 在没有匹配的情况下一定要返回旧的state default: return state } }
reducer是纯函数，第一个参数是当前state，第二个参数是接收的action，reducer通过action的type来判断要处理的逻辑，
注意，reducer一定要返回新的state才能触发view重新渲染，所以这里返回的 {...state} 就是一个新对象，最后如果没有匹配到
对应action，就返回旧的state。
rootReducer 代码：
import {combineReducers} from 'redux'
// import systemReducer from './systemReducer'
import userReducer from './userReducer'
// 包含所有的计算函数
export default combineReducers({
// system: systemReducer,
user: userReducer
})
前面一个reducer是处理用户板块action的，一个网站有很多板块，比如系统设置，如果把所有的处理都放到一个reducer中，那么这个函数会非常庞大，
所以在文件组织上我们把 reducer按照类型拆分成多个reducer，最后用redux提供的combineReducer函数进行合并，rootReducer就是干这事的
store.js 代码：
import {createStore,applyMiddleware} from 'redux'
import thunk from 'redux-thunk'
import rootReducer from './reducers/rootReducer'
export default function configureStore() {
return createStore(
rootReducer,
applyMiddleware(thunk)
)
}
这段代码是配置store的，通过createStore函数来创建一个store，第一个参数是 reducer，第二个参数是加载中间件，这个地方加载了thunk中间件，是redux官方提供的，
专门用来处理异步action，上面的userAction中设置sex时旧采用了异步的方式。
index.js 代码：
import React from 'react'; import ReactDOM from 'react-dom'; import {Provider} from 'react-redux'; import configureStore from './store'; import './index.css'; import App from './App'; import * as serviceWorker from './serviceWorker'; ReactDOM.render(, document.getElementById('root')); serviceWorker.unregister();
前面已经搞定了action,reducer,store，这个文件就是应用redux道项目中，主要关注 Provider和 store两个地方，Provider时redux提供给react的包装器，
store属性用来注入状态管理。这个地方就不解释内部原理了，只要知道这么用就行。
App.js 代码：
import React, { Component } from 'react';
import {connect} from 'react-redux';
import {nameAction,sexAction} from './actions/userAction';
// import {bgcolorAction} from './actions/systemAction';
// import logo from './logo.svg';
import './App.css';
class App extends Component {
componentDidMount() {}
render() {
return (
{/*
*/}
name:{this.props.user.name}
sex:{this.props.user.sex}
{/* */}
{ JSON.stringify(this.props) }
);
}
}
const mapStateToProps = state => ({
...state
})
const mapDispatchToProps = dispatch=>({
name: (name)=>dispatch(nameAction(name)),
sex: ()=>dispatch(sexAction())
// bgcolor: ()=>dispatch(bgcolorAction())
})
export default connect(mapStateToProps,mapDispatchToProps)(App);
这个地方关注 connect,mapStateToProps,mapDispatchToProps，
connect是redux提供的连接器，任何要使用redux这一套的view就必须使用connect连接，mapStateToProps是将store中的数据复制到
本view的props中，而且是实时同步的，
mapDispatchToProps 是将actioni复制到本view的props中，让view拥有发送action的机会。