关于 redux 中间件使用的简单记录
可以在 github 搜索 redux-thunk || redux-devtools || redux-devtools-extension 查看文档

1. 在项目安装 redux-thunk。

yarn add redux-thunk || npm install redux-thunk --save

2. 在创建 redux 时,使用 redux, redux-thunk 配置redux-devtools

import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import reducer from './reducer';

const composeEnhancers =
  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose;

const enhancer = composeEnhancers(
  applyMiddleware(thunk)
);

const store = createStore(reducer, enhancer);

export default store;

3. 在 actionCreator 创建 action ，就可以使用函数作为返回值了

export const getTodoList = () => {
  // 这里可以接收 dispatch 参数，直接使用，相当于调用 store.dispatch 方法
  return (dispatch) => {
    axios.get('/api/todolist')
      .then((res) => {
        const data = res.data
        const action = getInitListAction(data)
        dispatch(action)
      })
      .catch((error) => {
        console.log(error)
      })
  }
}

4. 在 componentDidMount 钩子函数中调用 action

  componentDidMount() {
   const action = getTodoList()
   store.dispatch(action)
  }

5. redux 接收传值，处理改变 state

export default (state = defaultState, action) => {

  if (action.type === INIT_LIST_ACTION) {
    const newState = JSON.parse(JSON.stringify(state))
    newState.list = action.data;
    return newState;
  }
  
  return state;
}