React-Redux 是 React 生态中最常见的状态管理库之一。它专门用于构建大型、可扩展的 Web 应用程序，它使用单向数据流的模式来减少运行时错误和提高应用程序的性能。在 React-Redux 库中，connect() 函数用于将 React 组件和 Redux 储存库连接起来。然而，经常会发现在使用 connect() 函数时，代码会变得长而复杂。因此，社区开发了一个新的 npm 包，即 react-redux-connectme，它使 React-Redux 应用程序中的 connect() 函数变得更加简单和易用。
在本教程中，我们将介绍 react-redux-connectme 包的使用。我们将讨论 react-redux-connectme 的特性、如何使用它，以及如何在实际应用程序中使用它。
安装 react-redux-connectme
为了使用 react-redux-connectme 包，首先需要在您的项目中安装它。通过以下命令进行安装：
npm install react-redux-connectme --save
react-redux-connectme 的特性
react-redux-connectme 包在连接 React 组件和 Redux 储存库时具有以下特性：
- 易于使用：connectme（）函数仅需要传递一个展示组件和映射函数。无需传递映射的状态到 props 中。
- 不需要 mapStateToProps 和 mapDispatchToProps 函数：使用 react-redux-connectme 包不需要编写 mapStateToProps 和 mapDispatchToProps 函数。可以直接在展示组件中调用 Redux 中定义的处理函数。
- 嵌套 connect() 函数：如果您需要在一个展示组件中连接多个组件，可以使用 react-redux-connectme 包中的 connectWith() 函数来嵌套 connect() 函数。
使用 react-redux-connectme
以下是如何使用 react-redux-connectme 包来连接 React 组件和 Redux 储存库。
定义 Redux 储存库
以下是一个简单的 Redux 储存库示例，其定义了要在 React 组件中使用的状态变量。
-- -------------------- ---- -------
------ - ----------- - ---- --------
----- ------------ - -
------ --
--
----- ------- - ------ - ------------- ------- -- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
---- ------------
------ - ------ ----------- - - --
--------
------ ------
-
--
----- ----- - ---------------------
------ ------- ------使用 connectme() 函数
-- -------------------- ---- -------
------ ----- ---- --------
------ - --------- - ---- ------------------------
------ ----- ---- ----------
----- --- - ------- -- -
----- --------------- - -- -- -
---------------- ----- ----------- ---
--
----- --------------- - -- -- -
---------------- ----- ----------- ---
--
------ -
-----
----------------------
------- --------------------------------------------
------- --------------------------------------------
------
--
--
----- --------------- - ------- -- -
------ -
------ ------------
--
--
------ ------- -------------- ------------------------在上面的代码中，我们首先导入 react-redux-connectme 包和我们定义的 store。然后，我们定义了一个 App 组件，它显示一个标题和两个按钮。然后，我们定义了两个处理函数，它们分别用于递增和递减计数器值。
接下来，我们使用 connectme() 函数将 App 组件连接到 Redux 储存库中。在 connectme() 函数中，我们传递了我们定义的展示组件 App，以及一个映射函数 mapStateToProps，该函数将 Redux 储存库中的状态映射为 props 的一个对象。connectme() 函数还需要传递我们的 Redux 储存库。
嵌套连接方法
有时候，我们可能需要在一个展示组件中连接多个组件。在这种情况下，我们可以使用 react-redux-connectme 包中的 connectWith() 函数来嵌套 connect() 函数。
以下是一个示例的代码，它演示了如何在一个展示组件中使用嵌套连接方法。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---------- ----------- - ---- ------------------------
------ ----- ---- ----------
----- --- - ------- -- -
------ -
-----
-------- --
-------- --
------
--
--
----- ------- - ------- -- -
----- --------------- - -- -- -
---------------- ----- ----------- ---
--
----- --------------- - -- -- -
---------------- ----- ----------- ---
--
------ -
-----
----------------------
------- --------------------------------------------
------- --------------------------------------------
------
--
--
----- --------------- - ------- -- -
------ -
------ ------------
--
--
----- ---------------- - ------------------ -----------------
------ ------- ----------------------- ------------------在上述代码中，我们首先定义了一个展示组件 App，并在其中使用了两个 Counter 组件。然后，我们定义了一个 Counter 组件，并使用之前定义的 connectme() 函数连接到 Redux 储存库中。接下来，我们使用 connectWith() 函数嵌套 App 组件和 ConnectedCounter 组件。在 connectWith() 函数中，我们传递了我们定义的 Redux 储存库和连接好的 Counter 组件。
以上就是使用 react-redux-connectme 包连接 React 组件和 Redux 储存库的详细介绍。react-redux-connectme 简化了使用 connect() 函数所需的代码，使得在实际应用程序中使用 React-Redux 更加容易。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005536c81e8991b448d0a0a