前言
在现代的 Web 开发中，前端框架已经成为开发必备的工具。React.js 是一款非常优秀的前端框架，它为我们的复杂应用带来了很多便利。而 Redux.js 则帮我们解决了 React.js 中数据管理的问题。但是，随着应用需求的增长，我们可能要将数据请求和操作分离出去，这个时候我们就需要用到 react-redux-async 这个 npm 包。
什么是 react-redux-async？
react-redux-async 是为了减少 Redux 和 React 中异步操作所带来的模板代码而开发的 npm 包。它为我们提供了一套优雅的数据流程设计和封装，非常适合用于管理复杂的数据流应用，并且其使用方法也非常简单。下面我们就来详细了解一下它的使用方法。
安装
使用 npm 或 Yarn 进行安装：
npm install react-redux-async --save
或者
yarn add react-redux-async
用法
首先，我们需要在 Redux 中创建一个 reducer 和一些 action。这部分代码可以参考 Redux 的官方文档。这里假设我们已经拥有了一个可以获取数据的 action 和对应的 reducer。
-- -------------------- ---- -------
-- -- -------------
------ ----- ------------ - -- -- -
------ ----- ---------- --------- -- -
--- -
----- -------- - ----- --------------------------------------
----- ---- - ----- ----------------
-------------------------------
- ----- ------- -
--------------------------------
-
-
-
-- ------ - ---- --
------ ----- ---------------- - -------------------
------ ----- ---------------- - -------------------
-- ----- ------
------ ----- -------------- - ---- -- --
----- -----------------
-------- -----
---
-- ------- ------
------ ----- -------------- - ----- -- --
----- -----------------
-------- ------
---
-- -------
----- ------------ - -
----- -----
------ -----
--
------ ----- ----------- - ------ - ------------- ------- -- -
------ ------------- -
---- -----------------
------ -
---------
----- ---------------
------ -----
--
---- -----------------
------ -
---------
----- -----
------ ---------------
--
--------
------ ------
-
--接着，我们需要使用 react-redux-async 这个包来创建相应的组件。通常我们会将包装后的组件放在一个单独的文件中。下面是一个包装组件的示例：
-- -------------------- ---- -------
------ - ------------ - ---- --------------------
------ - ------------ - ---- ------------
------ - ----------- - ---- -------------
----- --------------- - ----- -- -
------ -
----- -----------
------ ------------
--
--
----- ------------------ - -
---------- -------------
--
----- ------- - -
----------- ------- -- -- ------- - ---
--
------ ------- ----------------------------- ------------------- ---------现在，我们可以直接使用这个包装后的组件了。
-- -------------------- ---- -------
------ ---------------- ---- ---------------------
----- ----------- ------- --------------- -
------------------- -
-----------------------
-
-------- -
----- - ----- ----- - - -----------
-- ------- -
------ -----------------------------
-
-- ------- -
------ ------------------
-
------ ---------------------
-
-
------ ------- ------------------------------这样，我们就可以在组件中直接调用 fetchData 这个 props，获取相应的数据了。
总结
通过使用 react-redux-async，我们可以大大简化 Redux 和 React 中异步操作所带来的模板代码。它为我们提供了一套优雅的数据流程设计和封装，使得管理复杂的数据流程变得更加方便。相信通过本文的介绍，你已经掌握了如何使用 react-redux-async 这个 npm 包。加油，将它应用于你的 React.js 项目中吧！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055e7c81e8991b448dbd74