异步action是指它的值为一个函数，同步action是指它的值是一个对象

1.引入redux-thunk

  1. yarn add redux-thunk

引入中间件,并且将中间件作为createStore的第二个参数传入，这里的第二个参数中间件是一个函数，可以传入一个参数为引入的thunk

  1. //该文件用于暴露store对象
  2. //引入createStore,专门用于创建redux中最核心的store对象
  3. //引入applyMiddleware中间件
  4. import {createStore,applyMiddleware} from 'redux'
  6. //引入为count组件服务的reducer
  7. import countReducer from './count_reducers'
  9. //引入react-thunk,用于支持异步action
  10. import thunk from 'redux-thunk'
  12. //store中需要一个为之服务的reducer,因此将引入的reducer当参数传入这个创建的store中
  13. //并且将这个store对象暴露出去
  14.  export default createStore(countReducer,applyMiddleware(thunk))

2.异步处理action.js

  1. 在action中进行异步操作，返回一个函数，作为异步处理方案
  2. //分别封装两个action函数用来创建action对象
  3. import {
  4.     INCREMENT,
  5.     DECREMENT
  6. } from './constant'
  7. import store from './store'
  8. export const createIncrement = data => ({
  9.     type: INCREMENT,
  10.     data
  11. })
  12. export const createDecrement = data => ({
  13.     type: DECREMENT,
  14.     data
  15. })
  16. //异步的action就是指action返回的是一个函数，并且该函数的返回值是一个同步的action
  17. //异步的action就是指action返回的是一个函数，并且该函数的返回值是一个同步的action
  18. export const createAsyncIncrement = (data, time) => {
  19.     return (dispatch) => {
  20.         setTimeout(() => {
  21.            dispatch(createIncrement(data))
  22.         }, time);
  23.     }
  24. }

3.使用触发action

  1.    asyncIcrement=()=>{
  2.         let {value}=this.selectNumber
  3.     store.dispatch(createAsyncIncrement(value*1,500))
  4.     }