Redux+Promise+React 实现异步数据更新
在现代 Web 应用程序开发中，异步操作非常常见，而且非常有用。这使得应用程序可以更高效地处理资源，提高用户体验。然而，异步操作也带来了一些困难，例如异步代码非常难以理解和工作。
Redux 和 Promise 是广泛使用的库，它们可以帮助解决异步数据更新的问题。本文将介绍如何使用 Redux 和 Promise 来实现异步数据更新，以及如何在 React 应用程序中使用它们。
前置知识
在阅读本文之前，您应该：
- 了解 JavaScript 的基础。
- 了解 React 和 Redux 的基础概念和用法。
- 熟悉 Promise 的概念和 API。
Redux
Redux 是一个用于管理 JavaScript 应用程序状态的库。它围绕着一个单一的全局状态树（state tree）来构建应用程序。Redux 提供了一种可预测的状态管理模式，可以使应用程序更容易理解和调试。
Redux 的核心是一个不可变的 state，这意味着您不能直接修改它。相反，您应该通过发出 actions 来更新 state。每个 action 的形式如下：
{
type: 'ACTION_TYPE',
payload: { ... }
}在 Redux 中，更新 state 的唯一方式是通过 reducers。Reducer 是一个纯函数，它接受当前状态和要应用到该状态的 action，并返回新状态。Reducer 在 Redux 应用程序中起着非常重要的作用。
Redux 与 React 的配合使用通常是通过 React 绑定库（例如 react-redux）完成的。React 组件中的数据通常来自 Redux store。当组件需要更新数据时，它会发出 actions，然后通过 reducers 更新 store 中的数据。
Promise
Promise 是 JavaScript 中的一个基本概念，它被用于管理异步操作。Promise 表示一个异步操作的结果，它有三种状态：未完成（pending）、已完成（fulfilled）和已拒绝（rejected）。
当 Promise 被创建时，它处于未完成状态。当异步操作成功时，Promise 的状态将变为已完成，并带有异步操作的结果。当异步操作失败时，Promise 的状态将变为已拒绝，并带有一个错误对象。
Promise 是一种非常强大的工具，它可以让您更好地组织代码和处理异步操作。它是异步编程的未来，因为它提供了比传统的回调函数更好的错误处理和代码组织方法。
Redux 和 Promise 的结合使用
Redux 可以很好地与 Promise 配合使用，以处理异步操作。Redux 中的 actions 可以返回 Promise，这使得异步操作更容易处理。当 Promise 结束时，可以按照 needs 的方式发送同步 actions。
下面是一个示例 Redux action，它使用 Promise 来更新数据：
-- -------------------- ---- -------
------ -------- ----------- -
------ -------- -- -
---------- ----- ------------------ ---
------ ------------------
-------------- -- ----------------
---------- -- -
---------- ----- --------------------- -------- ---- ---
--
--------- -- -
---------- ----- -------------------- ---
---
--
-上面的代码做了以下事情：
- 当 fetchData 函数被调用时，它 dispatch 了一个 action，该 action 表示数据开始加载。
- 然后，fetch('/api/data') 函数执行异步网络请求，返回一个 Promise。
- 在 Promise 结束时，我们得到了响应数据 JSON，它被分配给 data 变量。
- 最后，dispatch 调用会将得到的 data 作为 payload，发送一个带有 FETCH_DATA_SUCCESS type 的 action。
当您需要更新状态时，这是一种非常有用的方法。如果您需要加载数据，并且在加载完成后需要更新状态，那么这就是正确的方法。
Redux Promise 中间件
Redux Promise 中间件是一个可以轻松使用 Promise 的 Redux 辅助工具。它允许您在 actions 中返回 Promise，并按照通常的方式处理 actions。Redux Promise 中间件会在 Promise 结束时自动发送同步 actions。
使用 Redux Promise 中间件，我们可以更新前面的 fetchData 函数，使它更加简单：
export function fetchData() {
return {
type: 'FETCH_DATA',
payload: fetch('/api/data').then(response => response.json())
};
}请注意，我们这里直接将 Promise 作为 redux action 的 payload 进行返回。中间件会在 Promise 结束时，自动帮我们 dispatch 一个新的 type 为 FETCH_DATA_FULFILLED 的 action。
可以在 store 的 applyMiddleware() 函数中使用 Redux Promise 中间件，如下所示：
import { createStore, applyMiddleware } from 'redux';
import promiseMiddleware from 'redux-promise-middleware';
import rootReducer from './reducer';
const middleware = applyMiddleware(promiseMiddleware);
const store = createStore(rootReducer, middleware);以上代码创建了一个 store，它使用了 Redux Promise 中间件。这使得我们可以直接返回 Promise 在派发的 action 中，而不必考虑中间的 dispatch 和 type。例如，fetchData 函数返回 Redux action 对象直接从中提取出了 response.json()。
React 中的异步请求
现在我们准备好开始将 Redux 和 Promise 与 React 应用程序一起使用来更新异步数据了。首先，让我们考虑一个简单的 React 组件，它需要在首次加载和用户请求时加载异步数据。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
----- ----------- ------- --------- -
------------------ -
-------------
---------- - -
---------- -----
----- ----
--
------------- - -------------------------
-
------------------- -
----------------
-
---------- -
-- ---------
-
-------- -
-- ---------------------- -
------ ----------------------
- ---- -- ---------------- --- ----- -
------ -----
- ---- -
------ -
-----
-----------------
------
--
-
-
-
------ ------- ------------上面的代码演示了 React 组件中的异步请求。当组件挂载时，我们会立即发出异步请求。当数据加载完成时，我们会更新组件的状态，以反映新的数据。
为了使 loadData 函数更容易维护，并且可以将其与 Redux 和 Promise 配合使用，我们推荐将其拆分为以下几个部分：
fetchData：实际发出请求并返回 Promise。
loadData：在 Promise 结束时更新 state。
下面的代码演示了如何实现这两个函数：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------- - ---- --------------
------ - --------- - ---- ------------
----- ----------- ------- --------- -
------------------ -
-------------
---------- - -
---------- ----
--
------------- - -------------------------
-
------------------- -
------------------------------ -- -
----------------
---
-
----------------------------- -
-- ---------------- --- --------------- -
----------------
-
-
---------- -
---------------
---------- -----
---
-
-------- -
-- ---------------------- -
------ ----------------------
- ---- -
------ -
-----
-----------------
------
--
-
-
-
-------- ---------------------- -
------ -
----- ----------
--
-
------ ------- ------------------------ - --------- ----------------此示例将发出异步请求的代码移动到 Redux action 中，并使用 React 绑定函数与 Redux store 进行连接。此外，我们还更新了组件的状态以反映请求是否完成。
fetchData 函数的工作方式与前面的示例非常相似，但此时它返回 Promise，并使用 Redux Promise 中间件自动发送同步 actions。我们之后详细讲述如何实现返回 Promise 的 fetchData 函数。
componentDidUpdate() 函数在组件的 props 更新时被调用。因此，当 Redux store 中的 data 更新时，我们可以使用 setState() 函数将 isLoading 设置为 false。
如果您使用 Redux 插件查看应用程序的状态，并且在 fetchData 函数中包含 console.log() 语句，您会看到以下输出：
在上面的屏幕截图中，我们可以看到 Redux store 中包含了 “FETCH_DATA_FULFILLED” action 的消息。由于在 fetchData 函数中返回了 Promise，并将其作为 action 的 payload 进行一个同步的 dispatch，因此，这个状态消息是自动生成的。
结论
在这篇文章中，我们详细介绍了如何使用 Redux 和 Promise 来实现异步数据更新，并展示了如何在 React 应用程序中使用它们。我们看到，在 Redux 中实现异步操作并不困难，您只需要使用 Redux Promise 中间件即可轻松地返回 Promise 了。
Redux 和 Promise 都是非常有用的工具，可以帮助您将异步操作与 Redux store 结合使用。希望我们的教程可以帮助您更好地理解如何在 React 应用程序中使用异步数据，并开始使用 Redux 和 Promise 来处理异步操作！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6770244ae9a7045d0d7a6113