第一个redux

做了一个增加在职程序员的个数的简单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(, document.getElementById('root'));}

7.在组件里使用store的信息并且调用store.dispatch()来发出action

目前有${this.props.store}前端程序员在职

store.dispatch(this.props.addPeople)}>招聘前端人员

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( () ,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