【React.js 08】Redux处理异步事件

基于上一篇【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}
}

Done!