做了一個增加在職程序員的個數(shù)的簡單demo，主要是為了感受一下整個redux的流程。
1.新建一個文件夾index.redux.js文件來單獨管理redux（先安裝redux)--save
2.在index.redux.js中寫reducer函數(shù)票顾，用于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中寫一個用于增加程序員數(shù)量的action creator?
export function addPeople(){ return {type:"前端人員入職"};}
4.在index.js中導入上面寫的兩個函數(shù)
import {counter, addPeople} from './index.redux';
5.在index.js中新建store
const store = createStore(counter);
6.將兩個函數(shù)傳遞到組件里
function render(){ ReactDOM.render(<App store={store} addPeople={addPeople}/>, document.getElementById('root'));}
7.在組件里使用store的信息并且調(diào)用store.dispatch()來發(fā)出action
<h1>目前有${this.props.store}前端程序員在職</h1> <button onClick={()=>store.dispatch(this.props.addPeople)}>招聘前端人員</button>
8.在index.js中調(diào)用store.subscribe(listener)來監(jiān)聽state的改變
store.subscribe(render);
到這里弟晚，就已經(jīng)用上了redux的基本功能啦朋截。之后來完成更加進階的功能，用redux來處理異步位他。
9.在index.js中導入thunk和applyMiddleware(先安裝redux-thunk)--save
import thunk from 'redux-thunk';
import {createStore,applyMiddleware} from 'redux';
10.在創(chuàng)建store中加入第二個參數(shù)
const store = createStore(counter,applyMiddleware(thunk));
11.在index.redux.js中模擬一個異步函數(shù)
export function addPeopleAsync(){ return dispatch=>{ setTimeout(()=>{dispatch(addPeople())},2000); }}
接下來步驟和同步一樣氛濒，這個時候就能處理異步函數(shù)了。
chrome有一個可以監(jiān)控redux的插件鹅髓，現(xiàn)在來綁定這個插件泼橘，先在應用商店下載插件。然后需要在代碼里綁定一下迈勋。
12.先在index.js中導入compose來復合函數(shù)
import {createStore,applyMiddleware,compose} from 'redux';
13.獲取插件炬灭，如果沒有則賦值空函數(shù)
const reduxDevtools = window.devToolsExtension?window.devToolsExtension():()=>{};
14.在創(chuàng)建store時傳入復合好的函數(shù)
const store = createStore(counter,compose(applyMiddleware(thunk),reduxDevtools));
這個時候，就能在chrome中使用redux插件查看state狀態(tài)了。
為了方便管理redux重归，使用react-redux來連接米愿。(先安裝react-redux)--save
15.在index.js中導入Provider
import {Provider} from 'react-redux';
16.直接在render中用provider包含app作為第一個參數(shù),并傳入store參數(shù)（僅需要store參數(shù)）
ReactDOM.render( (<Provider store={store}><App /></Provider>) ,document.getElementById('root'));
17.在組件中導入connect
import {connect} from 'react-redux';
18.導入函數(shù)
import {addPeople,addPeopleAsync} from '../index.redux';
19.在connect中傳入?yún)?shù)，參數(shù)會綁定在props中鼻吮，這里使用的是裝飾者模式育苟。第一個參數(shù)，把state給props椎木，第二個參數(shù)违柏，把方法給props。（放在class下方）
const mapStatetoProps = (state)=>{ return {num:state}}const actionCreators = {addPeople,addPeopleAsync}Fathertest = connect(mapStatetoProps,actionCreators)(Fathertest);
獲取數(shù)據(jù)可以直接通過this.props.addPeople,this.props.num等香椎，并且不需要用dispatch
