使用Redux中间件构建一个计时器(setInterval & clearInterval)

npm install redux redux-thunk

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';

const initialState = {
  timerId: null,
  count: 0
};

// 定义action类型
const START_TIMER = 'START_TIMER';
const STOP_TIMER = 'STOP_TIMER';
const INCREMENT_COUNT = 'INCREMENT_COUNT';

// 定义action创建函数
const startTimer = () => ({
  type: START_TIMER
});

const stopTimer = () => ({
  type: STOP_TIMER
});

const incrementCount = () => ({
  type: INCREMENT_COUNT
});

// 定义reducer
const reducer = (state = initialState, action) => {
  switch (action.type) {
    case START_TIMER:
      return {
        ...state,
        timerId: setInterval(() => {
          store.dispatch(incrementCount());
        }, 1000)
      };
    case STOP_TIMER:
      clearInterval(state.timerId);
      return {
        ...state,
        timerId: null
      };
    case INCREMENT_COUNT:
      return {
        ...state,
        count: state.count + 1
      };
    default:
      return state;
  }
};

// 创建store并应用中间件
const store = createStore(reducer, applyMiddleware(thunk));