Question

import React, {Component} from 'react'
import {createStore, combineReducers, applyMiddleware} from 'redux';
import thunk from 'redux-thunk'
import redudxPromise from 'redux-promise';
import {composeWithDevTools} from 'redux-devtools-extension';

const ActionTypes = {
  ADD_NUM: 'ADD_NUM',
  MINUSE_NUM: 'MINUSE_NUM',
  INIT_NUM: 'INIT_NUM'
};

const ActionCreators = {
  AddNum(num) {
    return {type: ActionTypes.ADD_NUM, payload: num}
  },
  MinusNum(num) {
    return {type: ActionTypes.MINUSE_NUM, payload: num}
  },
  AddNumAsync(num) {
    return (dispatch, getState) => {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          dispatch(ActionCreators.AddNum(num));
          resolve(num);
        }, 1000);
      });
    }
  },
  MinusNumAsyncPromise(num) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(ActionCreators.MinusNum(num));
      }, 1000);
    })
  }
}

const numReducer = (state = 0, action) => {
  switch (action.type) {
    case ActionTypes.ADD_NUM:
      return state + action.payload;
    case ActionTypes.MINUSE_NUM:
      return state - action.payload
    default:
      return state;
  }
};

// 此处由于是开发阶段用了 redex 的开发工具所以不用考虑以下的变化。
const store = createStore(numReducer, composeWithDevTools(applyMiddleware(thunk, redudxPromise),
// other store enhancers if any
));

class Count extends Component {

  constructor(props, context) {
    super(props, context)
    this.state = {
      Num: 0
    }
  }

  componentDidMount() {
    store.subscribe(() => {
      this.setState({
        Num: store.getState()
      })
    });
  }

  render() {
    return (
      <div>
        <p>{store.getState()}</p>
        <p>{this.state.Num}</p>
        <button
          onClick={() => {
          store.dispatch(ActionCreators.AddNum(1))
        }}>
          +1
        </button>
        <button
          onClick={() => {
          store
            .dispatch(ActionCreators.AddNumAsync(2))
            .then(res => console.log(res))
            .catch(e => console.log(e))
        }}>
          async+1
        </button>

        <button
          onClick={() => {
          store.dispatch(ActionCreators.MinusNum(1))
        }}>
          -1
        </button>
        <button
          onClick={() => {
          store.dispatch(ActionCreators.MinusNumAsyncPromise(1))
          .then(res => console.log(res))
        }}>
          async Promise -1
        </button>
      </div>
    )
  }
}

export default Count