做了一个增加在职程序员的个数的简单demo，主要是为了感受一下整个redux的流程。
1.新建一个文件夹index.redux.js文件来单独管理redux（先安装redux)--save
2.在index.redux.js中写reducer函数，用于state的重新计算，并将其导出
export function counter(state=0,action){ switch(action.type){ case "前端人员入职": return state+1; case "前端人员离职": return state-1; default: return 10; }}
3.在index.redux.js中写一个用于增加程序员数量的action creator
export function addPeople(){ return {type:"前端人员入职"};}
4.在index.js中导入上面写的两个函数
import {counter, addPeople} from './index.redux';
5.在index.js中新建store
const store = createStore(counter);
6.将两个函数传递到组件里
function render(){ ReactDOM.render(<App store={store} addPeople={addPeople}/>, document.getElementById('root'));}
7.在组件里使用store的信息并且调用store.dispatch()来发出action
<h1>目前有${this.props.store}前端程序员在职</h1> <button onClick={()=>store.dispatch(this.props.addPeople)}>招聘前端人员</button>
8.在index.js中调用store.subscribe(listener)来监听state的改变
store.subscribe(render);
到这里，就已经用上了redux的基本功能啦。之后来完成更加进阶的功能，用redux来处理异步。
9.在index.js中导入thunk和applyMiddleware(先安装redux-thunk)--save
import thunk from 'redux-thunk';
import {createStore,applyMiddleware} from 'redux';
10.在创建store中加入第二个参数
const store = createStore(counter,applyMiddleware(thunk));
11.在index.redux.js中模拟一个异步函数
export function addPeopleAsync(){ return dispatch=>{ setTimeout(()=>{dispatch(addPeople())},2000); }}
接下来步骤和同步一样，这个时候就能处理异步函数了。
chrome有一个可以监控redux的插件，现在来绑定这个插件，先在应用商店下载插件。然后需要在代码里绑定一下。
12.先在index.js中导入compose来复合函数
import {createStore,applyMiddleware,compose} from 'redux';
13.获取插件，如果没有则赋值空函数
const reduxDevtools = window.devToolsExtension?window.devToolsExtension():()=>{};
14.在创建store时传入复合好的函数
const store = createStore(counter,compose(applyMiddleware(thunk),reduxDevtools));
这个时候，就能在chrome中使用redux插件查看state状态了。
为了方便管理redux，使用react-redux来连接。(先安装react-redux)--save
15.在index.js中导入Provider
import {Provider} from 'react-redux';
16.直接在render中用provider包含app作为第一个参数,并传入store参数（仅需要store参数）
ReactDOM.render( (<Provider store={store}><App /></Provider>) ,document.getElementById('root'));
17.在组件中导入connect
import {connect} from 'react-redux';
18.导入函数
import {addPeople,addPeopleAsync} from '../index.redux';
19.在connect中传入参数，参数会绑定在props中，这里使用的是装饰者模式。第一个参数，把state给props，第二个参数，把方法给props。（放在class下方）
const mapStatetoProps = (state)=>{ return {num:state}}const actionCreators = {addPeople,addPeopleAsync}Fathertest = connect(mapStatetoProps,actionCreators)(Fathertest);
获取数据可以直接通过this.props.addPeople,this.props.num等，并且不需要用dispatch
