随着移动互联网的发展，前端应用的复杂性逐渐增加，因此需要对数据流进行更好的管理和维护，来确保应用的稳定运行。在前端领域，Redux 是一种很受欢迎的状态管理库，它能够帮助我们管理应用中的数据流，同时它也能够与服务端进行无缝的交互。本文将介绍如何使用 Redux 与服务端进行数据通信的最佳实践。
服务端通信方案
在前端开发中，我们通常会使用 AJAX 或 WebSockets 等技术进行数据交互。在实现与服务端的通信时，我们需要处理一些问题，例如请求的错误处理，请求的并发控制等等。这里我们介绍使用 Redux-thunk 和 Axios 这两个工具库来实现服务端通信。
Redux-thunk
Redux-thunk 是 Redux 的一个中间件，它允许我们在 Redux 的 action 中包含异步请求。这样，我们就可以使用它来发起异步的请求，并在异步请求完成后将数据传递给 Redux store。
例如，我们可以编写一个 action，使用 Axios 来发起一个 GET 请求：
-- -------------------- ---- -------
------ ----- ---- --------
------ ----- --------- - -- -- ---------- --------- -- -
---------- ----- -------------------- ---
------ -------------------
-------------- -- -
---------- ----- --------------------- -------- ------------- ---
--
------------ -- -
---------- ----- --------------------- ----- ---
---
--在上面的代码中，我们首先派发一个 'FETCH_USER_REQUEST' 的 action，然后使用 Axios 发起一个 GET 请求，在请求成功后，我们向 store 中派发一个 'FETCH_USER_SUCCESS' 的 action，并把获取到的数据传递给 action，请求失败时我们派发一个 'FETCH_USER_FAILURE' 的 action。
在 Redux store 中，我们可以定义一个 reducer 来处理这个 'FETCH_USER_SUCCESS' 的 action，将返回的数据存放到 store 中。
Axios
Axios 是一个基于 Promise 的 HTTP 客户端，它可以在浏览器和 Node.js 中使用。通过它，我们可以轻松地发送 HTTP 请求，并处理响应数据。
例如，我们可以使用 Axios 发送一个 GET 请求：
-- -------------------- ---- -------
------ ----- ---- --------
-------------------
-------------- -- -
---------------------------
--
------------ -- -
-------------------
---在上面的代码中，我们使用 Axios 发送了一个 GET 请求，并在请求成功后打印出了获取到的数据，请求失败时则打印出了错误信息。
示例代码
以下是一个使用 Redux-thunk 和 Axios 来获取用户信息的示例代码：
建立 Redux store
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ ----- ---- --------------
------ ----- ---- --------
----- ------------ - -
------ ---
----------- ------
------ -----
--
----- ------- - ------ - ------------- ------- -- -
------ ------------- -
---- ----------------------
------ -
---------
----------- -----
--
---- ----------------------
------ -
---------
----------- ------
------ ---------------
--
---- ----------------------
------ -
---------
----------- ------
------ -------------
--
--------
------ ------
-
--
----- ----- - -------------------- ------------------------
------ ------- ------在上面的代码中，我们定义了一个 Redux store，其中包含了一个名为 users 的数组，存放着所有用户的信息；一个布尔值 isFetching，表示是否正在进行数据请求；一个 error 对象，表示请求失败时的错误信息。
我们使用了 Redux-thunk 来处理异步请求，在 reducer 中分别处理派发的 'FETCH_USERS_REQUEST'、'FETCH_USERS_SUCCESS' 和 'FETCH_USERS_FAILURE' 三种 action。
发起异步请求
-- -------------------- ---- -------
------ ----- ---- --------
------ ----- ---------- - -- -- ---------- --------- -- -
---------- ----- --------------------- ---
------ -------------------
-------------- -- -
---------- ----- ---------------------- -------- ------------- ---
--
------------ -- -
---------- ----- ---------------------- ----- ---
---
--在上面的代码中，我们定义了一个 fetchUsers 的 action，该函数返回一个函数，并使用了 Redux-thunk 来处理异步请求。在该函数中，我们首先派发了一个 'FETCH_USERS_REQUEST' 的 action，然后使用 Axios 发起了一个 GET 请求，在请求成功时，我们将获取到的数据通过 action 部分传递给了 store，并派发了一个 'FETCH_USERS_SUCCESS' 的 action；请求失败时，则派发了一个 'FETCH_USERS_FAILURE' 的 action。
组件中使用
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------------ ----------- - ---- --------------
------ - ---------- - ---- -------------------------
----- --------- - -- -- -
----- -------- - --------------
----- - ------ ----------- ----- - - ----------------- -- -------------
------------ -- -
-----------------------
-- ----
-- ------------ -
------ ----------------------
-
-- ------- -
------ ----------- ----------------------
-
------ -
----
--------------- -- -
--- ------------------------------
---
-----
--
--
------ ------- ----------在上面的代码中，我们定义了一个 UsersList 组件，该组件中使用了 useSelector 和 useDispatch 这两个 React-Redux hooks。我们使用 useSelector 来访问 Redux store 中的数据，使用 useDispatch 来派发异步请求。通过 useEffect 来在组件挂载时派发异步请求，等待数据请求成功之后，渲染用户列表。
总结
通过本文，我们了解了如何使用 Redux-thunk 和 Axios，来与服务端进行异步数据通信。在实际开发中，我们可以根据具体的业务情况来选择不同的通信方案，并根据实际情况进行优化。通过合理的组织代码结构，我们可以让应用更容易维护和扩展。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c13c4283d39b4881597937