求和案例（redux完整版）

涉及的文件有：

1. redux/store.js，无变更
2. redux/reducer.js，有变更
3. redux/action.js，有变更
4. redux/constant.js，新增
5. components/Counter/index.jsx，有变更

redux/store.js

import { createStore } from "redux";
import counterReducer from "./reducer.js";

export default createStore(counterReducer);

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});

redux/constant.js

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

Counter/index.jsx（Counter组件）

import React, { Component } from 'react'
import store from "../../redux/store.js";
import { createIncrementAction,createDecrementAction } 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;  
        setTimeout(() => {
            store.dispatch(createIncrementAction(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精简版）