React-Redux 是一个非常流行的前端框架，它允许我们使用 Redux 数据流框架来管理 React 应用程序的状态。在 React-Redux 项目中，我们经常需要处理异步数据，例如从远程 API 加载数据或与服务器进行通信。这种情况下，我们需要考虑如何管理异步操作，以便确保应用程序的响应速度和可靠性。
本文将介绍在 React-Redux 项目中如何管理异步操作，包括使用 Redux-thunk 中间件和 Redux-saga 进行异步操作管理的示例代码。我们还将讨论如何在处理异步操作时处理错误和显示加载状态。
Redux-thunk
Redux-thunk 是一个中间件，它允许我们编写异步操作，这些操作返回一个函数而不是一个对象。这个函数接收 dispatch 和 getState 函数作为参数，并且我们可以通过返回异步操作的结果来 dispatch 我们希望的 action。
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- ------- ------ ----- ---- ------------- ------ ----------- ---- ------------ ----- ----- - ------------ ------------ ---------------------- - ------ ------- -----
在 Redux-thunk 的示例代码中，我们使用 applyMiddleware 函数将 thunk 中间件注册到 Redux store 中。在我们的 action 中，我们可以返回一个函数，该函数接收 dispatch 和 getState 函数作为参数，并且在异步操作完成后 dispatch 我们希望的 action。
export const fetchUser = (userId) => (dispatch, getState) => {
dispatch({ type: 'FETCH_USER_REQUEST' })
fetch(`https://api.example.com/users/${userId}`)
.then(response => response.json())
.then(data => dispatch({ type: 'FETCH_USER_SUCCESS', payload: data }))
.catch(error => dispatch({ type: 'FETCH_USER_FAILURE', error }))
}在这个示例代码中，我们定义了一个 fetchUser() action，它返回一个函数，该函数接收 dispatch 和 getState 函数作为参数。我们发送请求，如果请求成功，我们使用 dispatch 发送一个 FETCH_USER_SUCCESS action，否则 dispatch 一个 FETCH_USER_FAILURE action。
Redux-saga
Redux-saga 是另一个 Redux 中间件，它允许我们使用基于 Generator 的异步代码来管理异步操作。它可以管理多个异步操作的顺序和副作用，例如调用历史记录或设置定时器等。
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- ------- ------ -------------------- ---- ------------ ------ ----------- ---- ------------ ------ -------- ---- --------- ----- -------------- - ---------------------- ----- ----- - ------------ ------------ ------------------------------- - ---------------------------- ------ ------- -----
在 Redux-saga 的示例代码中，我们使用 applyMiddleware 函数将 saga 中间件注册到 Redux store 中。我们还使用 sagaMiddleware.run() 函数启动我们的 rootSaga。
下面是使用 Redux-saga 的示例代码：
-- -------------------- ---- -------
------ - ---- --------- - ---- --------------------
------ - ------------------- ------------------- ------------------ - ---- ---------
--------- ----------------- -
--- -
----- -------- - ----- --------------------------------------------------------
----- ---- - ----- ---------------
----- ----- ----- ------------------- -------- ---- --
- ----- ------- -
----- ----- ----- ------------------- ----- --
-
-
--------- ---------- -
----- ----------------------------- ----------
-
------ ------- --------在这个示例代码中，我们定义了一个 fetchUser() generator 函数来处理 FETCH_USER_REQUEST action。当我们 dispatch 该 action 时，saga 中间件将运行我们的 fetchUser() 函数并等待它完成。如果请求成功，我们使用 put 发送一个 FETCH_USER_SUCCESS action 并将响应数据作为 payload。否则，我们使用 put 发送 FETCH_USER_FAILURE action 并将错误对象作为 error。
错误处理和状态显示
在处理异步操作时，我们还需要考虑如何处理错误和显示加载状态。在 Redux-thunk 中，我们可以在 dispatch 之前和 dispatch 之后分别 dispatch 请求和响应 action。我们还可以在状态 store 中添加 isLoading 和 errorMessage 字段来存储加载状态和错误消息。
-- -------------------- ---- -------
------ ----- --------- - -------- -- ----- ---------- -- -
---------- ----- -------------------- --
--- -
----- -------- - ----- ------------------------------------------------
----- ---- - ----- ---------------
---------- ----- --------------------- -------- ---- --
- ----- ------- -
---------- ----- --------------------- ----- --
-
-在 Redux-saga 中，我们可以使用 try/catch 块来捕获错误并 dispatch 错误 action。我们还可以使用 isLoading 和 errorMessage 字段来存储加载状态和错误消息。
-- -------------------- ---- -------
--------- ----------------- -
--- -
----- ----- ----- ------------------ --
----- -------- - ----- --------------------------------------------------------
----- ---- - ----- ---------------
----- ----- ----- ------------------- -------- ---- --
- ----- ------- -
----- ----- ----- ------------------- ----- --
-
-对于加载状态，我们可以在我们的组件类中使用组件的 state 属性来存储状态。我们还可以使用条件语句和 spinner 组件来显示和隐藏加载状态。
-- -------------------- ---- -------
----- -------- ------- --------- -
----- - -
---------- -----
-
------------------- -
--------------- ---------- ---- --
------------------- -- -
--------------- ---------- ----- --
--
-
-------- -
----- - --------- - - ----------
------ -
-----
---------- -- -------- ---
-------------------------- -- -
----- ------------- ----------- --
---
------
-
-
-在我们的示例代码中，我们在 componentDidMount 生命周期方法中发起异步操作，并将 isLoading 设置为 true。当异步操作完成时，我们将 isLoading 设置为 false，然后显示或隐藏 spinner 组件。
总结
在 React-Redux 项目中，处理异步操作是一个重要的任务。我们可以使用中间件工具来处理异步操作，例如 Redux-thunk 和 Redux-saga。我们还需要处理错误和显示加载状态。历经这些内容的介绍，相信各位同学对于如何在 React-Redux 项目中管理异步操作已有所了解。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645af064968c7c53b0d3cf9a