在 React 开发过程中，很多时候我们需要通过组件之间传递数据来实现一些复杂的交互效果。而在这种情况下，通常会使用到一些状态管理工具，比如 Redux，MobX等。然而，这些工具在使用上往往需要写大量的样板代码来定义状态和 action，给开发带来一定的工作量。而 npm 包 react-plumbing 则可以为开发者提供一种更为轻量级和简单易用的状态管理方案。
安装 react-plumbing
在项目中使用 react-plumbing 首先需要进行 npm 安装：
npm i react-plumbing
创建 Store
在 react-plumbing 中，我们需要创建一个 Store 来管理应用程序的状态。在创建 Store 时，我们需要定义一个状态对象，并在状态对象中定义一些处理状态的方法。
我们首先需要导入 createStore 方法，它是 react-plumbing 中用来创建 Store 的方法：
import { createStore } from 'react-plumbing';然后我们可以使用 createStore 方法来创建一个 Store：
-- -------------------- ---- -------
----- ----- - -------------
------ - ------ - --
----------- -
--------------- ------ ---------------- - - ---
--
----------- -
--------------- ------ ---------------- - - ---
--
------- -
--------------- ------ - ---
-
---在上述代码中，我们创建了一个名为 store 的 Store，并定义了一个状态对象 state，它包含了一个 count 属性，用来存储计数器的数值。同时我们定义了三个操作状态的方法 increment、decrement 和 reset，它们通过调用 setState 方法来更新状态。
使用状态
在 React 中，我们可以使用 hooks 来将 Store 的状态和更新方法传递给组件。在 react-plumbing 中，我们可以使用 useStore hook 来获取 Store 的状态和方法。
我们首先需要将 store 通过 Provider 提供给应用程序，如下所示：
-- -------------------- ---- -------
------ - -------- - ---- -----------------
-------- ----- -
------ -
--------- --------------
--- -------- ---
-----------
--
-然后我们可以在组件中使用 useStore hook 来获取 Store 的状态和更新方法，如下所示：
-- -------------------- ---- -------
------ - -------- - ---- -----------------
-------- --------- -
----- - ------ ---------- ---------- ----- - - -----------
------ -
-----
--------- -----------------
------- ------------------------------
------- ------------------------------
------- ------------------------------
------
--
-在上述代码中，我们使用了 useStore hook 来获取 Store 的状态和更新方法，然后将 count 属性渲染到页面上，并通过按钮调用 increment、decrement 和 reset 方法来操作计数器的数值。
示例代码
下面是完整的示例代码：
-- -------------------- ---- -------
------ - --------- -------- - ---- -----------------
----- ----- - -------------
------ - ------ - --
----------- -
--------------- ------ ---------------- - - ---
--
----------- -
--------------- ------ ---------------- - - ---
--
------- -
--------------- ------ - ---
-
---
-------- ----- -
------ -
--------- --------------
-------- --
-----------
--
-
-------- --------- -
----- - ------ ---------- ---------- ----- - - -----------
------ -
-----
--------- -----------------
------- ------------------------------
------- ------------------------------
------- ------------------------------
------
--
-结语
使用 react-plumbing，我们可以避免写大量样板代码来定义状态和 action，从而提高开发效率。除了上述例子中的计数器，react-plumbing 也可以用于更复杂的应用程序状态管理，让我们在开发中更加高效和愉快！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005600b81e8991b448dddb6