1. 简介
redux-linked 是一个小型但功能强大的 npm 包，它提供了一种简单而有效的方式来将多个 redux store 连接起来。redux-linked 是用于 react-redux 应用程序的一项非常有用的库，它为开发人员提供了一种更好的方式来组织和管理其 redux 应用的状态。
2. 安装
npm 包 redux-linked 的安装非常简单，只需要运行以下命令即可：
npm install redux-linked
或者，您也可以使用 yarn：
yarn add redux-linked
3. 使用
下面，我们来看一下如何在您的应用程序中使用 redux-linked。
3.1 创建 LinkedStoreProvider
首先，您需要创建一个 LinkedStoreProvider 组件，并将其作为 propTypes 传递给您要连接的所有子组件。这很容易做到，只需要按照以下代码示例进行：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------------- - ---- ---------------
------ - ----------- - ---- --------
------ ----------- ---- -------------
----- ------ - -------------------------
----- ------ - -------------------------
----- ------ - -------------------------
----- --- - -- -- -
-------------------- ------------
------- ----------------------------
------- ----------------------------
------- ----------------------------
-- ---------
-------
-------
-------
---
--------------------- --
----------------------
--如您所见，我们首先创建了三个 redux store，然后通过 React 的 PropTypes 实现了一个类型、必需性检查。接下来，我们将所有 redux store 作为一个对象传递给 LinkedStoreProvider，然后将 MyConnectedComponent 作为子组件嵌套在其中。
3.2 连接组件
接下来，您需要使用 connectWithLink 函数将 MyComponent 连接到 redux store：
-- -------------------- ---- -------
------ ----- ---- --------
------ - --------------- - ---- ---------------
----- ----------- - --
------------
------------
------------
-- -- -
-----
------------------------
------------------------
------------------------
------
--
----- --------------- - -- -- ------- - ---- -- -- -
----- ----------- - ------------
------ -
------------ -----------------------
------------ -----------------------
------------ -----------------------
--
--
------ ------- ----------------------------------------------在上面的代码中，我们定义了 MyComponent，并将其用 mapStateToProps 函数连接到了 redux store。注意，在 mapStateToProps 函数中，我们还要为 connectWithLink 函数提供一个 link 方法，以便 redux-linked 可以使用 link 方法将多个 redux store 连接在一起。
现在，您的 MyComponent 已经连接到了多个 redux store，您可以在组件中自由地访问所有这些 redux store 的数据了。
4. 示例代码
下面是使用 redux-linked 连接多个 redux store 的示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- -------------
------ - -------------------- --------------- - ---- ---------------
------ - ------------ --------------- - ---- --------
----- ----------- - -----------------
------- ------ - - ---- - -- ------- -- -
------ ------------- -
---- ----------
------ - ---- --------- - - --
--------
------ ------
-
--
------- ------ - - ---- - -- ------- -- -
------ ------------- -
---- ----------
------ - ---- --------- - - --
--------
------ ------
-
--
------- ------ - - ---- - -- ------- -- -
------ ------------- -
---- ----------
------ - ---- --------- - - --
--------
------ ------
-
--
---
----- ------ - -------------------------
----- ------ - -------------------------
----- ------ - -------------------------
----- --- - -- -- -
-------------------- ------------
------- ----------------------------
------- ----------------------------
------- ----------------------------
-- ---------
-------
-------
-------
---
--------------------- --
----------------------
--
----- ----------- - --
------------
------------
------------
---------
-- -- -
-----
------- -------------------
------- -------------------
------- -------------------
------- ----------- -- ---------- ----- --------- ----------------------
------
--
----- --------------- - -- -- ------- - ---- -- -- -
----- ----------- - ------------
------ -
------------ -----------------------
------------ -----------------------
------------ -----------------------
--
--
----- -------------------- - ----------------------------------------------
------ ------- ----5. 总结
redux-linked 是一个非常有用的 npm 包，您可以使用它将多个 redux store 连接在一起，以更好地管理您的 redux 应用程序状态。如果您正在编写一个大型的 react-redux 应用程序，并且需要连接多个 redux store，redux-linked 是您的最佳选择。在本文章中，我们详细介绍了 redux-linked 的安装和使用方式，并列举了一些示例代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066ffee361a36e0bce8a4f