在前端开发中，我们经常需要与后端 API 进行交互，获取数据或者提交数据。Redux 是一个流行的状态管理库，用于管理应用程序的状态。Redux 也提供了一种标准的方式来处理 API 请求，以确保应用程序的状态正确更新。
Redux 中的异步操作
在 Redux 中，所有的操作都是同步的，也就是说，当一个 action 被分发时，它会立即更新应用程序的状态。但是，在处理 API 请求时，我们通常需要进行异步操作，因为我们需要等待服务器响应后才能更新应用程序的状态。
Redux 提供了一些工具来处理异步操作。其中最常用的工具是 Redux Thunk 中间件。Redux Thunk 允许我们在 action 创建器中返回一个函数，而不是一个对象。这个函数可以执行异步操作，并在操作完成后分发一个新的 action。
以下是一个使用 Redux Thunk 处理 API 请求的示例：
-- -------------------- ---- -------
------ - ------------ ---------------- - ---- -------------------
------ - --------- - ---- --------
------ ----- ------------- - -----------------
------------------------
----- -------- -- -
----- -------- - ----- ------------------
------ --------------
-
--
----- ---------- - -------------
----- --------
------------- ---
--------- ---
-------------- --------- -- -
-------
------------------------------- ------- ------- -- -
---------------------- - - ------- --------- --
--
--------------------------------- ------- ------- -- -
---------------------- - - ------- ------------ ----- -------------- --
--
-------------------------------- ------- ------- -- -
---------------------- - - ------- --------- ------ -------------------- --
---
--
---
------ ------- -------------------在这个示例中，我们使用 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 请求的示例：
-- -------------------- ---- -------
------ - ------------ ---------------- - ---- -------------------
------ - ----------- ---------- - ---- --------
------ ----- ------------- - -------------------------------------- ----- -- -- -
----- -------- - ----- -------------------------- ---------------
------ - ------ ----------------- ------ ---------------- --
---
----- ------------- - -------------
----- -----------
------------- - ------ --- ------ -- --
--------- ---
-------------- --------- -- -
-------
------------------------------- ------- ------- -- -
------------ - ----------
--
--------------------------------- ------- ------- -- -
------------ - ------------
----------- - ---------------------
----------- - ---------------------
--
-------------------------------- ------- ------- -- -
------------ - ---------
----------- - ---------------------
---
--
---
------ ------- ----------------------在这个示例中，我们使用 Promise.all 同时执行多个 API 请求。当所有请求都完成后，我们将用户数据和帖子数据存储在状态中。
总结
在 Redux 中正确处理 API 请求是一个关键的问题。通过使用 Redux Thunk 中间件和 Redux Toolkit 的 createSlice 和 createAsyncThunk，我们可以轻松地处理异步操作，并确保应用程序的状态正确更新。在实际开发中，我们应该根据具体情况选择合适的工具，并遵循最佳实践，以确保应用程序的性能和稳定性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6579a3abd2f5e1655d3b6e3e