redux求和案例-异步action版

效果图

npm add redux-thunk

Count组件中，原本使用settimeout的地方改为调用异步action
component=>Count=>index.jsx

import React, { Component } from 'react'
//引入store,用于获取redux中报错的状态
import store from '../../redux/store'
//引入actionCreator，专门用于创建action对象
import { 
    createIncrementAction,
    createDecrementAction,
    createIncrementAsyncAction} from '../../redux/count_action'

export default class Count extends Component {
    state={carName:'奔驰'}
    //加法
    increment=()=>{
        const{value}=this.selectNumber
       //通知redux加value
       //store.dispatch({type:'increment',data:value*1})
       store.dispatch(createIncrementAction(value*1))
    }
    //减法
    decrement=()=>{
        const{value}=this.selectNumber
        //store.dispatch({type:'decrement',data:value*1})
        store.dispatch(createDecrementAction(value*1))
    }
    //奇数再加
    incrementIfOdd=()=>{
        const{value}=this.selectNumber
        const count=store.getState()
       if(count%2!=0){
        // store.dispatch({type:'increment',data:value*1})
        store.dispatch(createIncrementAction(value*1))
       }
    }
    //异步加
    incrementAsync=()=>{
        const{value}=this.selectNumber
        store.dispatch(createIncrementAsyncAction(value*1,500))
    }
    render() {
        return (
            <div>
                <h1>当前求和为：{store.getState()}</h1>&nbsp;
                <select ref={c=>this.selectNumber=c}>&nbsp;
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>&nbsp;
                <button onClick={this.increment}>+</button>&nbsp;
                <button onClick={this.decrement}>-</button>&nbsp;
                <button onClick={this.incrementIfOdd}>当前求和为奇数再加</button>&nbsp;
                <button onClick={this.incrementAsync}>异步加</button>&nbsp;
            </div>
        )
    }
}

redux=>count_action.js中，增加一个异步action

/**该文件专门为Count组件生成action对象 */
import{INCREMENT,DECREMENT} from './constant'

//同步action，就是指action的值为Object类型的一般对象
export const  createIncrementAction=data=>({type:INCREMENT,data})
export const  createDecrementAction=data=>({type:DECREMENT,data})

//所谓的异步action，就是指action的值为函数,异步action中一般都会调用同步action
export const createIncrementAsyncAction=(data,time)=>{
    return(dispatch)=>{
        setTimeout(() => {
            dispatch(createIncrementAction(data))
        }, time);
    }
}

redux=>store.js

/**该文件专门用于暴露一个store对象，整个应用只有一个store对象 */
//引入createStore,专门用于创建redux中最为核心的store对象
import {createStore,applyMiddleware} from 'redux'
//引入为Count组件服务的reducer
import countReducer from './count_reducer'
//引入redux-thunk,用于支持异步action
import thunk from 'redux-thunk'
//暴露store
export default createStore(countReducer,applyMiddleware(thunk))