如何在 Redux 中正确处理 API 请求？

在前端开发中，我们经常需要与后端 API 进行交互，获取数据或者提交数据。Redux 是一个流行的状态管理库，用于管理应用程序的状态。Redux 也提供了一种标准的方式来处理 API 请求，以确保应用程序的状态正确更新。

Redux 中的异步操作

在 Redux 中，所有的操作都是同步的，也就是说，当一个 action 被分发时，它会立即更新应用程序的状态。但是，在处理 API 请求时，我们通常需要进行异步操作，因为我们需要等待服务器响应后才能更新应用程序的状态。

Redux 提供了一些工具来处理异步操作。其中最常用的工具是 Redux Thunk 中间件。Redux Thunk 允许我们在 action 创建器中返回一个函数，而不是一个对象。这个函数可以执行异步操作，并在操作完成后分发一个新的 action。

以下是一个使用 Redux Thunk 处理 API 请求的示例：

// javascriptcn.com 代码示例
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import { fetchUser } from './api';

export const fetchUserById = createAsyncThunk(
  'users/fetchByIdStatus',
  async (userId) => {
    const response = await fetchUser(userId);
    return response.data;
  }
);

const usersSlice = createSlice({
  name: 'users',
  initialState: {},
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchUserById.pending, (state, action) => {
        state[action.meta.arg] = { status: 'loading' };
      })
      .addCase(fetchUserById.fulfilled, (state, action) => {
        state[action.meta.arg] = { status: 'succeeded', data: action.payload };
      })
      .addCase(fetchUserById.rejected, (state, action) => {
        state[action.meta.arg] = { status: 'failed', error: action.error.message };
      });
  },
});

export default usersSlice.reducer;

在这个示例中，我们使用 createAsyncThunk 创建了一个名为 fetchUserById 的异步 action 创建器。当这个 action 创建器被分发时，它会执行一个异步操作，然后分发一个新的 action，更新应用程序的状态。

在 extraReducers 中，我们定义了三个 reducer，用于处理 fetchUserById 的三个状态：pending、fulfilled 和 rejected。当 fetchUserById 处于 pending 状态时，我们将用户的状态设置为 loading。当 fetchUserById 处于 fulfilled 状态时，我们将用户的状态设置为 succeeded，并将用户数据存储在状态中。当 fetchUserById 处于 rejected 状态时，我们将用户的状态设置为 failed，并将错误消息存储在状态中。

处理多个 API 请求

在实际开发中，我们通常需要同时处理多个 API 请求。Redux 提供了一些工具来处理这种情况。其中最常用的工具是 Redux Toolkit 的 createSlice 和 createAsyncThunk。

以下是一个处理多个 API 请求的示例：

// javascriptcn.com 代码示例
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import { fetchUsers, fetchPosts } from './api';

export const fetchUserData = createAsyncThunk('userData/fetchData', async () => {
  const response = await Promise.all([fetchUsers(), fetchPosts()]);
  return { users: response[0].data, posts: response[1].data };
});

const userDataSlice = createSlice({
  name: 'userData',
  initialState: { users: [], posts: [] },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchUserData.pending, (state, action) => {
        state.status = 'loading';
      })
      .addCase(fetchUserData.fulfilled, (state, action) => {
        state.status = 'succeeded';
        state.users = action.payload.users;
        state.posts = action.payload.posts;
      })
      .addCase(fetchUserData.rejected, (state, action) => {
        state.status = 'failed';
        state.error = action.error.message;
      });
  },
});

export default userDataSlice.reducer;

在这个示例中，我们使用 Promise.all 同时执行多个 API 请求。当所有请求都完成后，我们将用户数据和帖子数据存储在状态中。

总结

在 Redux 中正确处理 API 请求是一个关键的问题。通过使用 Redux Thunk 中间件和 Redux Toolkit 的 createSlice 和 createAsyncThunk，我们可以轻松地处理异步操作，并确保应用程序的状态正确更新。在实际开发中，我们应该根据具体情况选择合适的工具，并遵循最佳实践，以确保应用程序的性能和稳定性。

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