基于上一篇【React.js 07】React中使用Redux所举的例子，我们对于派发的动作处理全部是同步的，这一篇我们将实现异步的。
例子依旧使用上一篇文章中所说的例子，代码有对应的贴在上面了。
上一篇的例子中，我们对于派发的动作处理全部是同步的，但是实际项目中，往往都是异步的动作居多，所以我们需要让Redux能够处理异步操作。
Redux处理异步，需要结合中间件，这里我们使用redux-thunk插件去处理。
1、安装redux-thunk插件
npm install redux-thunk --save
2、因为Redux默认只处理同步事件，异步事件需要redux-thunk的中间件，所以我们要使用applyMiddleware去开启thunk的中间件。
我们到index.js文件中去开启thunk的中间件。
首先引入管理中间件的函数applyMiddleware()：
import { createStore, applyMiddleware} from 'redux'
然后，把函数applyMiddleware()作为参数之一传给createStore方法：
//所以首先还是需要再引入thunk对象
import thunk from 'redux-thunk'
//然后把thunk给applyMiddleware()，applyMiddleware再给createStore()，这样就开启了中间件
const store = createStore(manageCompany, applyMiddleware(thunk))
开启了中间件后，接下来，我们就能执行异步操作了。
3、还记得上一篇中的action creator吗，我们利用它返回action type对象，而开启插件后，就可以直接返回函数，在这个函数里面，我们在异步完成后，再去使用dispatch派发事件。
在index.redux.js文件中去创建并export一个异步的action creator了：
// type为HIRE的异步action
export function hireAsync() {
return dispatch=>{
setTimeout(()=>{
dispatch(hire())
},2000)
}
}
reducer中新增了异步事件，那么外部就要能够接收到该事件，并且将其以属性的方式传递给组件App：
//import 新的异步方法
import { manageCompany, hire ,fire ,hireAsync} from './index.redux'
//render中把新增了异步事件以属性的方式传递给组件`App`
{...
ReactDom.render(
<App store={store} hire={hire()} fire={fire()} hireAsync={hireAsync()}/>,
document.getElementById('root')
)
...}
然后App组件中加入对应事件触发：
<p onClick=<p onClick={this.handlerCompanyManagement.bind(this,this.props.hireAsync)}>雇佣一人,晚两天到</p>
这样，就完成了一个异步的处理事件。
上代码！！！！
./src/App.js
import React , { Component } from 'react'
class App extends Component {
handlerCompanyManagement(action) {
this.props.store.dispatch(action)
}
render() {
const store = this.props.store
return (
<div>
<h1>公司现在有{store.getState()}人</h1>
<p onClick={this.handlerCompanyManagement.bind(this,this.props.hire)}>雇佣一人</p>
<p onClick={this.handlerCompanyManagement.bind(this,this.props.hireAsync)}>雇佣一人,晚两天到</p>
<p onClick={this.handlerCompanyManagement.bind(this,this.props.fire)}>开除一人</p>
</div>
)
}
}
export default App
./src/index.js
import React from 'react'
import ReactDom from 'react-dom'
import App from './App'
import { createStore ,applyMiddleware} from 'redux'
import thunk from 'redux-thunk'
import { manageCompany, hire ,fire ,hireAsync} from './index.redux'
// 通过reducer创建store
const store = createStore(manageCompany, applyMiddleware(thunk))
// 定义一个render()函数去渲染页面
function render() {
ReactDom.render(
<App store={store} hire={hire()} fire={fire()} hireAsync={hireAsync()}/>,
document.getElementById('root')
)
}
// 先手动调用一次看看页面效果
render()
// 然后再把render方法传入subscribe作为监听变化时自动刷新调用的方法
store.subscribe(render)
./src/index.redux.js
// 定义成常量，尽量避免使用魔法值
const HIRE = 'hireEmployee'
const FIRE = 'fireEmployee'
// 导出并且定义reducer
export function manageCompany(total = 1, action) {
switch (action.type) {
case HIRE:
return total + 1;
case FIRE:
return total - 1;
default:
return 1;
}
}
// type为HIRE的action
export function hire() {
return {type : HIRE}
}
// type为HIRE的异步action
export function hireAsync() {
return dispatch=>{
setTimeout(()=>{
dispatch(hire())
},2000)
}
}
// type为FIRE的action
export function fire() {
return {type : FIRE}
}
