Redux 是一种非常流行的 JavaScript 应用程序状态管理系统，它可以协调一个应用程序的数据流，并把应用程序的状态集中化处理。Redux 像是一个被全局使用的“状态仓库”，它存储了应用程序的当前状态，并通过一些特定的方法来更新这个状态。
Redux-object-connect 是一个基于 Redux 的工具，它提供了一种方便的方式来连接应用程序的 React 组件到应用程序的 Redux 状态管理中心。这个库也提供了简洁的工具来管理应用程序的对象状态。在这篇文章中，我们将会学习如何安装和使用这个npm 包，使你更快速的开发前端应用程序。
安装
你可以通过 npm 命令或者 yarn 命令来安装 redux-object-connect，例如:
npm install redux-object-connect 或者 yarn add redux-object-connect
用法
redux-object-connect 的主要目的是让使用 Redux 更快捷方便，所以它提供了一些简易的 API 来简化 Redux 的使用。使用 redux-object-connect 的第一步就是创建一个 store。例如：
-- -------------------- ---- ------- ------ - ----------- - ---- -------- ------ - --------------- - ---- -------- ------ - ------------------- - ---- ----------------------- -- ---- ------- ----- ------- - ----------------- -------- ------------------------ --- ----- ----- - ---------------------
这个例子创建了一个空的 state 对象，并在 Redux state 中提供了 store。
下一步是将 Redux 的状态应用到组件中。如果你使用了 Redux，那么你可能在组件中已经通过 connect 函数将状态，并从父组件中传递了 DOWN 到了子组件。使用 redux-object-connect，这些操作需要更少的代码来完成。
首先，在你的组件中引用函数：
import { objectConnect } from 'redux-object-connect';使用 objectConnect 函数来设置你组件的 connect 状态。例如：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------------- - ---- -----------------------
----- ----------- ------- --------- -
------------------- -
----- - -------- --------- ----------- - - -----------
-- -------------------- -
----------------------
-
-
-------- -
----- - -------- -------- - - -----------
-- -------------------- -
------ ----------------------
-
------ ----------- ----- --------------------------
-
-
----- --------------- - ------- ------ -- --
-------- --------------
--------- ---------------
---
----- ------------------ - ---------- -- --
------------ ---------- -- -
----------
----- ---------------
-------- -
--- ---------
--
---
--
---
------ ------- ------------------------------ ---------------------------------在这个例子中，我们创建了一个简单的 React 组件，并从配合文本中获取了 objectId。我们使用 objectConnect 函数来连接 required state 和 actions。componentWillMount生命周期中，我们将检查我们的对象是否已经存在于我们的 state 中，如果不存在，就会调用 fetchObject 方法来拉取它们。如果我们的数据 对象不在 state 中，我们会简单地展示一个 Loading 的消息。
我们使用 mapStateToProps 函数来注入在应用程序 store 中的数据。mapDispatchToProps 函数用来发起 action，并在 redux-object-connect 中对应连接到了 fetchObject 方法，fetchObject 方法的作用是获取数据，并在对象（object) 加载时更新 state。
在最后通过使用 objectConnect(mapStateToProps, mapDispatchToProps)(MyComponent) 来连接 redux 的 state 和 dispatch 到我们的组件。这些属性就会从父组件上传递 DOWN 到我们的子组件。
当我们进行以上的操作时，我们可以检查是否成功的将我们的 Redux state 和 dispatch 注入到我们的 React 组件中。如果一切都设置正确了，你的组件就能使用在父组件中提供的 state 和 action。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------- - ---- --------------
------ - ----------- - ---- --------
------ - --------------- - ---- --------
------ - -------------------- ------------- - ---- -----------------------
-- ---- -------
----- ------- - -----------------
-------- ------------------------
---
----- ----- - ---------------------
----- ----------- ------- --------------- -
-------- -
----- - -------- -------- - - -----------
-- -------------------- -
------ -------------
-
------ -
-----
------ ----- -----------------------------------
------
--
-
-
----- --------------- - ------- ------ -- --
-------- --------------
--------- ---------------
---
----- ------------------ - ---------- -- --
------------ ---------- -- -
----------
----- ---------------
-------- -
--- ---------
--
---
--
---
------------------------ - -
--------- ----
--
------------------------------------------ ----------------------------------
----- -------------------- - ------------------------------ --------------------
-----------
--
----------------
--------- --------------
--------------------- --
------------
-------------------------------
--这将会渲染一个 React 组件，并在 props 中注入了这两个函数。Redux 状态被连接到应用程序的 state 中，并且我们可以通过 fetchObject 方法取回和更新 state。
在这篇文章中我向大家演示了如何使用npm 包 redux-object-connect。redux-object-connect 库提供了一些便利的库来简化你的状态管理，使你能够更快捷的进行应用程序开发。我希望这篇文章能够对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005523d81e8991b448cfc63