redux-fly 是一个成熟的 npm 包，用于简化 Redux 的使用，使 Redux 和 React 更加容易协同工作。这个包非常有助于前端开发者提高开发效率，下面将详细介绍如何使用它。
Redux 和 React
Redux 是一个流行的 JavaScript 库，用于管理应用程序的全局状态，包括但不限于 React 应用程序。Redux 是一个非常强大和灵活的库，但是它的学习曲线可能比较陡峭。Redux 的主要思想是应用程序的状态应该保存在单一的状态树中，修改状态的唯一方法是派发特定的动作（actions）。Reducers 接收这些 actions 并对状态进行修改。任何修改后的状态都会重新渲染您的 React 组件，以反映有关新状态的所有更改。
React 是一个用于构建用户界面的 JavaScript 库，它使开发者能够轻松地创建可复用的组件。React 的主要思想是组件渲染应该保持确定性，给定相同的输入应始终产生相同的输出。如果状态发生了变化，则 React 负责在内部优化 DOM 操作以提高性能。
Redux 和 React 是非常好的一起使用的工具，但是它们需要一些额外的步骤来配置和协同工作。值得庆幸的是，redux-fly 包提供了一个简单的机制来连接 Redux 和 React 应用程序，从而使这个过程变得更加容易。
安装
要开始使用 redux-fly，您需要将其安装为项目的依赖项。您可以在 npm 命令行界面中运行以下命令：
--- ------- --------- ------
基本概念
redux-fly 的主要概念是它将 Redux 的集中化状态转换为 React 组件属性。这个想法的核心是，Redux 状态应该是应用程序的集中化存储，而不是散布在各个组件之间。而 React 组件应该仅使用它们需要的状态属性来渲染视图。
使用 redux-fly 时，您需要定义一个数据存储对象（默认为 R），以及一个渲染方法，并将组件与Redux Store 相连接。在组件内，您可以像访问属性一样访问存储中的数据。
使用教程
要使用 redux-fly，请按照以下步骤进行操作：
- 先在项目中安装 redux 包：
--- ------- ----- ------
- 导入 redux-fly 包并创建 storage：
------ --- ---- ------------
----- - - -----------------
------ -
----- ---
--
---这个存储可以用来保存一个、一组，或一系列数据，同时也可以通过 read/write 方法进行读写（请注意，这些方法是异步的）。组件在使用数据时，要从 state 对象中取得它。
- 定义渲染方法：
----- ------ - ------- ------ -- -
-----
----------------------
----
-------------------- -- -
--- ----------------------
---
-----
------
--- 连接 React 组件和 Redux Store：
----- ------------------ - ----------------- - ------ --- ---- ----- ---
现在，ConnectedComponent 就可以像 React 组件一样使用了，包括生命周期方法（例如 componentDidMount）和 propTypes。当您从组件中调用 Redux 的read/write方法时，redux-fly 会自动将数据更新到状态树中，并更新所有订阅了该数据的组件。
示例代码
假设您要创建一个简单的 React 组件来显示您的博客文章：
------ ----- ---- --------
------ --- ---- ------------
----- - - -----------------
------ -
------ -----
--
---
----- ------ - ------- ------ -- -
-----
----------------------
--------------------- -- -
---- --------------
---------------------
----------------------
------
---
------
--
----- ------------------ - ------------------
----- ------------ ------- --------------- -
------------------- -
---------------------------------------------------
-------------- -- ----------------
----------- -- -
---------------- -------
---
-
-------- -
------ ------------------- --------- ---- ------ ---
-
-在这个例子中，我们用 redux-fly 来连接每一篇博客文章的组件。这个组件通过钩子组件 componentDidMount 来请求博客文章列表，并将结果写入Redux存储中。渲染方法会将文章渲染出来，然后通过R.connect将此组件连接到存储中。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6006700de361a36e0bce8ce5