什么是 Redux Thunk

Redux Thunk 是一个 Redux 中间件，它允许在 Redux 应用程序中进行异步操作，例如 AJAX 调用或其他异步事件。

Thunk 是一个函数，其返回值是另一个函数。在 Redux 中，Thunk 允许我们编写 action creators，这些 action creators 返回一个函数而不是一个对象。这个函数接受 dispatch 和 getState 作为参数，并且在需要时可以进行异步操作。当异步操作完成时，函数可以使用 dispatch 发布一个已解决的 action。

为什么要使用 Thunk

Redux 是一个非常强大的工具，但是它并不支持异步操作。这意味着，如果要在 Redux 应用程序中进行异步操作，需要使用 Redux Thunk 这样的中间件。

Thunk 解决了两个问题。首先，它允许我们编写异步操作。其次，它允许我们在 action creators 中进行逻辑操作。

如何使用 Thunk

为了使用 Redux Thunk，我们需要在 Redux 应用程序中安装它。

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

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

一旦安装了 Redux Thunk，我们就可以开始使用它了。

我们可以将 action creators 编写为返回函数的形式，然后在返回的函数中进行异步操作并在完成后 dispatch 解决的 action。

import axios from 'axios';

const getUsers = () => {
    return (dispatch, getState) => {
        dispatch({ type: 'USERS_LOADING' });

        axios.get('https://jsonplaceholder.typicode.com/users')
            .then(response => {
                dispatch({ type: 'USERS_SUCCESS', payload: response.data });
            })
            .catch(error => {
                dispatch({ type: 'USERS_FAILED', payload: error.message });
            });
    };
};

在上面的例子中，我们返回一个函数，它接受 dispatch 和 getState 作为参数。我们使用 dispatch 发布了一个用户加载的 action，并在异步操作完成后根据 API 的响应 dispatch 用户成功或错误的 action。

总结

Redux Thunk 是一个中间件，它允许在 Redux 应用程序中进行异步操作，并允许在 action creators 中进行逻辑操作。它可以简化异步操作的代码，并将所有异步操作集中在单个位置。如果您使用 Redux 并需要进行异步操作，那么 Redux Thunk 就是您需要的工具。