当我们在 Redux 中处理异步请求或者复杂的逻辑时，组件会变得臃肿，此时我们希望把这些逻辑放到其他地方处理。这时，可以使用 Redux-thunk 中间件。

1. 安装和配置 Redux-thunk 中间件

要使用 Redux-thunk 中间件，需要先安装它。可以在 GitHub 上找到它的源码（github.com/reduxjs/red…

在创建 Store 的时候需要插入使用这个中间件，需要使用 Redux 提供的 applyMiddleware API 引用中间件：

javascriptCopy code
import { createStore, applyMiddleware } from 'redux';
import reducer from "./reducer";
import thunk from "redux-thunk";

const store = createStore(
    reducer,
    applyMiddleware(thunk),
);

export default store;

在以上代码中，applyMiddleware(thunk) 就是在引用 Redux-thunk 中间件。

需要注意的是，在引用中间件的时候，还需要引入一个 compose。如果需要在浏览器中使用 Redux 开发者工具，可以按照下面的代码进行引入：

javascriptCopy code
const composeEnhancers =
    typeof window === 'object' &&
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
        window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose;

const enhancer = composeEnhancers(
    applyMiddleware(thunk),
);

const store = createStore(
    reducer,
    enhancer
);

export default store;

2. Redux-thunk 帮助处理异步操作

使用了 Redux-thunk 中间件之后，action 就不仅仅只是一个对象，可以是一个函数。下面是一个函数类型的 action，主要负责处理之前的逻辑：

javascriptCopy code
export const getTodoList = () => {
    return (dispatch) => {
        axios.get('/list.json').then((res) => {
            const data = res.data;
            console.log(res);
            // const action = initListAction(data);
            // dispatch(action);
        });
    };
};

在这个函数中，我们可以调用接口来获取数据，数据返回后就可以通过 dispatch 方法来派发一个 action 对象，从而更新 store 中的数据。

当你调用 dispatch 的时候，action 被发送过去的时候，action 指代的函数就会被自动的执行，从而会打印一些 log 信息出来。

接下来，我们需要在这个 action 中去修改 store 数据。可以使用之前的逻辑：

javascriptCopy code
dispatch(initListAction(data));

这里没有 store 对象，又怎么分发呢？其实，如果 action 是函数，其实返回的是一个 dispatch 方法，可以直接用。通过上面的逻辑，就完成了列表的初始化工作了。

3. 总结

使用 Redux-thunk 中间件可以帮助我们处理异步操作，需要在创建 Store 的时候插入配置这个中间件。使用时，可以直接参考官方文档来具体进行配置环境。

当创建一个新类型的 action 时，可以返回一个函数，也可以通过 dispatch 来分