求和案例（redux完整版）（异步action）

文章目录 redux/constant.jsredux/reducer.jsredux/action.jsredux/store.jsCounter/index.jsx（Counter组件）相关链接

action是一个普通js对象，包含type和data两个属性。其中，type属性，必选；data属性，可选。

action本身并无“同步”或“异步”之说，“同步action”、“异步action”更多的只是区分：

action creator的返回值是一个普通的js对象，即所谓的“同步action”。action creator的返回值是一个函数，即所谓的“异步action”。

本篇将使用异步action，涉及的文件有：

redux/constant.js，无变更redux/reducer.js，无变更redux/action.js，有变更redux/store.js，有变更components/Counter/index.jsx，有变更

要实现异步action，注意以下几点：

安装redux-thunk：npm install --save redux-thunk。将redux-thunk配置在store中。

import {createStore,applyMiddleware} from "redux";
import thunk from "redux-thunk";
import reducer from "./reducer.js";
export default createStore(reducer,applyMiddleware(thunk));

定义异步action。
异步action返回的函数，接受的第一个参数是dispatch（即store.dispatch）。

export const createIncrementAsyncAction = (data,time) => {
    return (dispatch) => {
        setTimeout(() => {
            dispatch(createIncrementAction(data));
        },time)
    }
}

派发异步action。

store.dispatch(createIncrementAsyncAction(Number(value),1000))

redux/constant.js

export const INCREMENT = 'increment';
export const DECREMENT = 'decrement';

redux/reducer.js

import { INCREMENT,DECREMENT } from "./constant";

const initState = 0

export default function reducer(preState=initState,action){
    const {type,data} = action;

    switch(type){
        case INCREMENT: return preState+Number(data);
        case DECREMENT: return preState-Number(data);
        default: return preState
    }
}

redux/action.js

import { INCREMENT,DECREMENT } from "./constant"

export const createIncrementAction = data => ({type:INCREMENT,data});
export const createDecrementAction = data => ({type:DECREMENT,data});

export const createIncrementAsyncAction = (data,time) => {
    return (dispatch) => {
        setTimeout(() => {
            dispatch(createIncrementAction(data));
        },time)
    }
}

redux/store.js

import { createStore,applyMiddleware} from "redux";
import thunk from "redux-thunk";
import counterReducer from "./reducer.js";

export default createStore(counterReducer,applyMiddleware(thunk));

Counter/index.jsx（Counter组件）

import React, { Component } from 'react'
import store from "../../redux/store.js";
import { createIncrementAction,createDecrementAction, createIncrementAsyncAction } from '../../redux/action.js';

export default class Counter extends Component {

    componentDidMount(){
        store.subscribe(() => {
            this.setState({})
        })
    }

    increment = () => {
        const {value} = this.selectEl;
        store.dispatch(createIncrementAction(Number(value)));
        
    }
    decrement = () => {
        const {value} = this.selectEl;
        store.dispatch(createDecrementAction(Number(value)));

    }
    incrementOdd = () => {
        const {value} = this.selectEl;
        const count = store.getState();
        if(count % 2 !== 0){
            store.dispatch(createIncrementAction(Number(value)));
        }
    }
    incrementWait = () => {
        const {value} = this.selectEl;  
        store.dispatch(createIncrementAsyncAction(Number(value),1000))
    }

  render() {
    const {increment,decrement,incrementOdd,incrementWait} = this;
    return (
        <div>
            <h2>当前求和为{store.getState()}</h2>
            <select ref={c => this.selectEl = c}>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select>&nbsp;
            <button onClick={increment}>+</button>&nbsp;
            <button onClick={decrement}>-</button>&nbsp;
            <button onClick={incrementOdd}>和为奇数时加</button>&nbsp;
            <button onClick={incrementWait}>等一等再加</button>
        </div>
    )
  }
}

相关链接

求和案例（纯react版本）
求和案例（redux精简版）
求和案例（redux完整版）