简介
随着 React 的流行，越来越多的开发者开始使用 Redux 来进行状态管理。为了方便使用，社区中涌现了不少算是一站式解决方案的 Redux 中间件。其中一个比较受欢迎的是 react-redux-fetch-if-necessary，它可以让你更优雅地发起网络请求。
安装
使用 npm 安装 react-redux-fetch-if-necessary：
npm install --save react-redux-fetch-if-necessary
使用
在 Redux 的 store 中配置中间件：
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ - --------------------- - ---- --------------------------------- ------ ----- ---- -------------- ------ ----------- ---- ------------- ----- --------------- - ------------------------ ------ ------- ------------ ------------ ---------------------- ---------------- --
我们推荐将 react-redux-fetch-if-necessary 和 Redux 的 thunk 中间件同时使用，这样可以方便地处理异步 action。
之后，就可以在 action 中发起网络请求了：
-- -------------------- ---- -------
-- ---------
------ - ------------- - ---- ---------------------------------
------ ----- ----------- - --------------
------ -------- ------------ -
------ -------- -- -
----- --- - --------------------------------
----------------------------------- -
----
------- ------
---------- ---- -- -
---------- ----- ------------ -------- - ---- - ---
--
-------- ----- -- -
---------- ----- ------------ -------- - ----- - ---
-
----
--
-fetchIfNeeded 接收两个参数：fetchType 和 options。fetchType 表示本次请求的类型，options 则包含了所有请求的相关设置。
在本例中，我们通过 url 将请求地址传递给了 options，assign 方法中的 onSuccess 和 onError 分别表示请求成功和失败的回调函数。我们在这里 dispatch 了 FETCH_USERS 类型的 action，将数据存储到 Redux store 中。
最后，我们需要回到 components 中，将 state 映射到 props 中：
-- -------------------- ---- -------
-- ------------
------ ------ - --------- - ---- --------
------ - ------- - ---- --------------
------ - ---------- - ---- -----------
----- -------- ------- --------- -
------------------- -
------------------------
-
-------- -
----- - ------ ------- - - -----------
-- --------- -
------ ------------------
-
------ -
----
--------------- -- -
--- ------------------------------
---
-----
--
-
-
----- --------------- - ----- -- --
------ -----------------
-------- -------------------
---
------ ------- ------------------------ - ---------- -------------当组件渲染时，我们触发了 fetchUsers 函数，开始发送网络请求。当请求数据返回后，我们将其存储在 Redux store 中，接着将 users 从 store 中映射到组件上并渲染出来。
案例
我们通过一个完整的案例来看看 react-redux-fetch-if-necessary 的所有应用。你可以将以下代码复制到你的项目中并运行。
-- -------------------- ---- ------- -- -------- ------ - ------------ --------------- - ---- -------- ------ - --------------------- - ---- --------------------------------- ------ ----- ---- -------------- ------ ----------- ---- ------------- ----- --------------- - ------------------------ ------ ------- ------------ ------------ ---------------------- ---------------- --
-- -------------------- ---- -------
-- ---------
------ - ------------- - ---- ---------------------------------
------ ----- ----------- - --------------
------ -------- ------------ -
------ -------- -- -
----- --- - ---------------------------------------------
----------------------------------- -
----
------- ------
---------- ---- -- -
---------- ----- ------------ -------- - ---- - ---
--
-------- ----- -- -
---------- ----- ------------ -------- - ----- - ---
-
----
--
--- -------------------- ---- -------
-- ----------
------ - ----------- - ---- -----------
----- ------------ - -
------ -
----- ---
-------- -----
-
--
------ ------- ------ - ------------- ------- -- -
------ ------------- -
---- ------------
------ -
---------
------ -
----- --------------------
-------- -----
-
--
--------
------ ------
-
---- -------------------- ---- -------
-- ------------
------ ------ - --------- - ---- --------
------ - ------- - ---- --------------
------ - ---------- - ---- -----------
----- -------- ------- --------- -
------------------- -
------------------------
-
-------- -
----- - ------ ------- - - -----------
-- --------- -
------ ------------------
-
------ -
----
--------------- -- -
--- ------------------------------
---
-----
--
-
-
----- --------------- - ----- -- --
------ -----------------
-------- -------------------
---
------ ------- ------------------------ - ---------- -------------最后，我们将 UserList 渲染到页面上：
-- -------------------- ---- -------
-- --------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------- - ---- --------------
------ ----- ---- ----------
------ -------- ---- --------------
----------------
--------- --------------
--------- --
------------
-------------------------------
--至此，你已经完成了网络请求的开发。
总结
react-redux-fetch-if-necessary 让 Redux 的状态管理变得更加丝滑。使用它的过程中，你将更加专注于数据的处理而不是网络请求的细节。我们的建议是：在使用它时，一定要充分了解如何设置网络请求响应和错误处理的回调函数。当你熟悉了这一点后，你就可以轻松地进行数据存储、状态管理和网络请求了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562d581e8991b448e0243