React+Redux 是当今前端开发中最常用的技术之一，能够快速构建现代化可扩展的应用程序。在网络请求方面，Redux 提供了一种可预测性的状态管理方法，能够轻松地对组件之间的数据进行交互，而 React 作为一个高效的视图层库，则能够将后端返回的数据以最优的方式呈现给用户。
Redux 的异步处理
Redux 的最大特点之一是其可预测性状态管理模式，但是 Redux 本身是同步的，而在实际的应用场景中，我们很少会遇到完全同步的数据请求，大多数的网络请求都是异步的。为了解决这个问题，Redux 提供了 Redux Thunk、Redux Observable 等中间件来支持异步请求的处理。
Redux Thunk 允许我们在 action 创建器中返回一个函数而不是一个对象，这个函数内部可以根据实际的网络请求结果来 dispatch 合适的 action，示例代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
----- ------------------- - ----------------------
----- ------------------- - ----------------------
----- ------------------- - ----------------------
----- ----------------- - -- -- --
----- -------------------
---
----- ----------------- - ----- -- --
----- --------------------
-------- -----
---
----- ----------------- - ----- -- --
----- --------------------
-------- -----
---
------ ----- ---------- - -- -- -------- -- -
------------------------------
-----------------------
-------------- -- -
----- ----- - --------------
-----------------------------------
--
------------ -- -
----- ------------ - --------------
------------------------------------------
---
--在上面的代码中，我们使用了 redux-thunk 中间件来处理异步请求，fetchUsers 函数返回的是一个函数，内部再实现了异步请求的逻辑。fetchUsersRequest、fetchUsersSuccess 和 fetchUsersFailure 都是 action 创建器，分别用于请求中、成功和失败时 dispatch 对应的 action。
React 中的网络请求
React 本身并不支持网络请求，但是我们可以使用第三方库来实现。最常用的库是 axios 和 fetch，它们都提供了 Promise API，能够让我们很方便地处理异步请求。下面是使用 axios 发起 GET 请求的示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
----- -------- ------- --------------- -
----- - -
------ ---
---------- -----
--
------------------- -
------------------------- -------
-----------------------
-------------- -- -
----- ----- - --------------
--------------------- ---------- --------
--
------------ -- -
---------------------------
------------------------- --------
---
-
-------- -
----- ------- ---------- - -----------
-- ----------- -
------ ----------------------
-
------ -
----
--------------- -- -
--- ------------------------------
---
-----
--
-
-上面的代码展示了如何在 React 组件中使用 axios 发起 GET 请求，并根据请求结果更新组件状态。在 componentDidMount 方法中，我们更新 isLoading 状态为 true，表示正在请求数据，同时发起网络请求。在请求成功或失败后，更新组件的状态，并根据 isLoading 状态展示不同的内容。
使用 Redux 和 React 的最佳实践
在实际的应用场景中，我们往往需要在组件之间共享数据或传递数据，这时候就需要 Redux 来进行状态管理。下面是一个使用 Redux 和 React 实现表单提交的最佳实践：
首先，我们需要定义一些 action 类型和 action 创建器：
-- -------------------- ---- -------
----- ------------------- - ----------------------
----- ------------------- - ----------------------
----- ------------------- - ----------------------
----- ----------------- - -- -- --
----- -------------------
---
----- ----------------- - ------ -- --
----- --------------------
-------- ------
---
----- ----------------- - ----- -- --
----- --------------------
-------- -----
---
------ ----- ---------- - -------- -- -------- -- -
------------------------------
------------------------- ---------
-------------- -- -
----- ------ - --------------
------------------------------------
--
------------ -- -
----- ------------ - --------------
------------------------------------------
---
--这个 action 创建器用于提交表单数据，当发起请求时，dispatch 的是 formSubmitRequest，请求成功时，dispatch 的是 formSubmitSuccess，失败时，dispatch 的是 formSubmitFailure。请求成功后，我们会拿到一个 result，用于更新组件的状态。
在 React 组件中，我们可以使用 connect 函数将 Redux 的状态和 action 创建器与组件连接起来，并使用 mapStateToProps 函数将状态映射到组件的 props 上，这样组件就能方便地访问 Redux 中的状态了：
-- -------------------- ---- -------
------ --------- ---- --------------
------ ------------ ---- -------------
----- ---- ------- --------------- -
----- - -
----- ---
------ --
--
------------ - ----- -- -
----- ------ ------ - -------------
---------------------- --------
--
------------ - ----- -- -
-----------------------
----- -------- - ----------------
--------------------------------
--
-------- -
----- ----------- ------- ------ - -----------
----- ------ ------ - -----------
------ -
----- -----------------------------
---------- -- ----------------------
------ -- -------------------
------- -- --------------------
------ ----------- ----------- ------------ ---------------------------- --
------ ------------ ------------ ------------- ---------------------------- --
------- -----------------------------
-------
--
-
-
----- --------------- - ----- -- --
---------- ----------------
------- -------------
------ -----------
---
------ ------- ------------------------ --------------------上面的代码中，我们通过 connect 函数和 mapStateToProps 函数将 Redux 中的状态和 action 创建器映射到组件的 props 上，这样就能够更方便地在组件中使用 Redux 的状态了。在 handleSubmit 方法中，我们使用了 formSubmit 函数发起表单提交请求，并传递了表单数据 formData。在组件渲染时，根据 isLoading、result 和 error 展示不同的内容，同时使用 handleChange 方法响应表单数据的变化。
总结
本文介绍了 React+Redux 在网络请求方面的应用。Redux 提供了可预测性的状态管理方法，能够轻松地处理异步请求；React+Redux 提供了一种可复用的状态管理模式，能够帮助我们更好地处理组件之间的数据交互。在最后，我们还介绍了一个使用 Redux 和 React 实现表单提交的最佳实践，期望读者能够在工作中灵活应用这些技术。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6486891e48841e989451723d