Redux 中间件之 Redux-Thunk 的详解

Redux 是一个非常流行的 JavaScript 应用程序状态容器。它被广泛应用于构建前端应用程序和大规模 Web 应用程序。Redux 使用单一数据源存储应用程序状态。它具有可预测的状态管理、易于调试和可扩展的架构。但是，为了实现异步操作（如 API 调用），我们需要使用 Redux 中间件。一个非常流行的 Redux 中间件是 Redux-Thunk。

什么是 Redux-Thunk？

Redux-Thunk 是一个 Redux 中间件，它允许我们在 Redux 应用程序中编写异步代码。使用 Redux-Thunk，我们可以编写异步操作（例如 API 调用）并将它们作为 action 常量返回。这样的异步操作会触发对应的 action 对象，并由 Redux Store 处理更新状态。

Redux-Thunk 本质上是一个 JavaScript 函数中间件。它拦截被派发的 action，并检查它是否是一个函数。如果是一个函数，Redux-Thunk 就会调用它并传递一些参数，如 dispatch、getState 等。action 函数可以异步调用其他 action 函数并返回它们的结果。

如何使用 Redux-Thunk？

为了使用 Redux-Thunk，我们需要在 Redux Store 的创建过程中将它作为 applyMiddleware() 的参数传递。下面的代码展示了如何在应用程序中使用 Redux-Thunk：

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

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

当我们向 Redux Store 派发一个 action 时，如果该 action 是一个函数，Redux-Thunk 就会拦截该 action，并调用它。下面的实例代码展示了如何从 Redux Store 中获取 JSON 数据：

// javascriptcn.com 代码示例
import axios from 'axios';

export const fetchData = () => async (dispatch) => {
  try {
    const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
    dispatch({ type: 'FETCH_DATA_SUCCESS', payload: response.data });
  } catch (error) {
    dispatch({ type: 'FETCH_DATA_FAILURE', payload: error.message });
  }
}

在上面的代码示例中，我们首先使用 Axios 库从 URL 获取数据。在我们成功获取数据后，我们将它作为一个 action 返回，并将其传递给 Redux Store 的 dispatch() 方法。如果在获取数据时发生错误，我们将返回一个错误消息。

Redux-Thunk 的优点

使用 Redux-Thunk 有以下优点：

支持异步操作：我们可以使用 Redux-Thunk 实现异步操作，如 API 调用。
副作用处理：Redux-Thunk 允许我们处理复杂的副作用，如网络请求。
代码可读性：Redux-Thunk 允许我们编写可读性更高的代码。我们可以使用异步 action 函数来更明确地表达对状态更改的意图。

总结

Redux-Thunk 是一个流行的 Redux 中间件，它允许我们编写异步操作。使用 Redux-Thunk，我们可以编写异步操作，如 API 调用，并将其作为 action 常量返回。它简化了异步流程，使代码更具可读性，并且处理异步操作更加简单。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/653f2e117d4982a6eb8b5bbe