Redux 是一种流行的 JavaScript 应用程序状态管理库，它与 React 配合使用广泛。在许多情况下，Redux 是构建 React 应用的最佳选择。但是，为了使 Redux 工作得更好，我们需要将 Redux 应用程序与服务端进行绑定。在本文中，我们将介绍如何在 Redux 和 React 应用程序中使用服务端数据，从而优化我们的 Redux 应用程序。
Redux 简介
Redux 是一个开源 JavaScript 库，用于管理应用程序的状态。它由 Dan Abramov 创建，最初作为 Flux 架构的替代方案。Redux 的核心概念是单一状态树，它存储整个应用程序的状态，并且只能通过派遣操作来更改它。具体来说，Redux 主要包含以下几个部分：
- Store：用于存储状态的容器。它是 Redux 应用程序中唯一的状态源。
- Action：表示应用程序中发生的事件。
- Reducer：用于根据操作更改状态的函数。
- Dispatch：用于将操作发送到 Store 的函数。
React 简介
React 是一个用于构建用户界面的 JavaScript 库，由 Facebook 开发并维护。React 的核心概念是组件，它们是应用程序 UI 的构建块。React 应用程序的一般工作流程如下：
- 定义组件并传递它们的属性（props）。
- 组件使用传递的属性渲染 UI。
- 当用户与 UI 交互时，组件会根据需要更新 UI。
将 Redux 与服务端绑定
尽管 Redux 可以与任何后端通信，但在本文中，我们将以 REST API 为例。我们可以使用 fetch API 或像 Axios 这样的库来从服务端获取数据。在实践中，必须注意以下事项：
在使用服务端数据之前，必须等待数据的到达。
在许多情况下，我们需要从服务端加载多个实体（entity）。例如，在电影应用程序中，我们需要同时加载电影和演员的信息。
我们需要在应用程序的多个地方使用服务端数据，而不仅仅是一次获取和使用。
考虑到这些问题，我们可以使用 Redux 中间件和异步操作来优雅地实现应用程序与服务端的绑定。我们可以创建一个 Redux 中间件，该中间件负责处理异步操作，然后将其放回 Redux Store 中。让我们来看一下示例代码：
------ - ---------------- ----------- - ---- --------
------ ----- ---- --------------
------ ----------- ---- -------------------
------ ------- -------- ---------------- -
----- ----- - ------------
------------
----------------------
--
------ ------
-在此代码中，我们使用 Redux 中间件库 thunk，将其应用于 createStore() 函数，以处理异步操作。Redux Store 现在可以处理 promise 对象而不仅仅是普通的 action，这意味着我们可以在 Store 中调用异步 action 创建器（action creators）方法。
现在是时候创建异步 action 创建器了。异步 action 创建器是返回函数的函数，该函数在 Store 的 dispatch() 方法被调用时被执行。在函数中，我们可以使用 fetch() 或其他 HTTP 客户端将 API 请求发送到我们的服务端，并以响应中的 Promise 解析 Store。让我们创建一个简单的示例：
------ -------- ------------- -
------ -------- -- -
--------------------------
------ ---------------------------------
-------------- -- ----------------
---------- -- -
------------------------------
---
--
-在此示例中，我们首先使用 dispatch() 发送一个 requestMovies() action。接着，我们使用 fetch() 发送 API 请求。当获取到响应时，我们就可以使用 dispatch() 发送 receiveMovies() action，将服务端数据发送到 Store。
在渲染 React 应用程序时，我们可以容易地访问该 Store，并根据需要使用我们的服务端数据。具体来说，我们可以在 React 组件中使用 mapStateToProps() 函数将 Store 的状态映射到组件的 props 中。
结论
在本文中，我们介绍了如何将 Redux 应用程序与服务端数据绑定。我们了解到，为了使 Redux 更好地使用服务端数据，我们需要使用 Redux 的中间件和异步操作。这允许我们从服务端获取数据并将其存储在 Redux Store 中。通过将 Store 的状态映射到 React 组件的 props 中，我们可以在 React 应用程序中轻松使用服务端数据。希望本文能够对你的 Redux 和服务端绑定实践提供帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6730629ceedcc8a97c91c698