什么是 kanpo？
kanpo 是一个 npm 包，它可以在使用 React 开发时，协助开发者更方便地管理 state。kanpo 提供了一种新的数据管理方式，甚至可以替代 Redux。
安装 kanpo
npm install kanpo
或者使用 yarn：
yarn add kanpo
kanpo 的使用方式
创建 store
首先，在你的 React 应用中，你需要创建一个 store，这个 store 是整个应用的数据中心。在 React 中，可以使用 Context 来管理这个 store，或者通过 props 将 store 传递给子组件。
-- -------------------- ---- ------- ------ - -------------- ---------- - ---- -------- ------ - ----------- - ---- -------- ----- ----- - ------------- ------ -- --- ------ ----- ------------ - --------------------- ------ -------- ---------- - ------ ------------------------- -
以上代码中，我们创建了一个名为 store 的对象，并使用 createContext 创建了一个 Context 对象 StoreContext，这个 Context 对象可以共享 store 对象给它的子组件。我们还提供了一个 useStore 自定义 Hook，它可以让我们在函数式组件中更方便地使用 store，后面我们会看到具体使用方法。
store 的数据
我们把 store 看作一个盒子，我们可以把数据放到这个盒子中，也可以从这个盒子中取出数据。我们使用 getState 方法来获取当前 store 的数据，使用 setState 方法来更新 store 的数据。
-- -------------------- ---- -------
------ - -------- - ---- ----------
-------- --------- -
----- ----- - -----------
----- ----- - -----------------------
-------- ----------- -
---------------- ------ ----- - - ---
-
-------- ------------- -
---------------- ------ ----- - - ---
-
------ -
-----
-------------------
------- ------------------------------
------- --------------------------------
------
--
-我们在 Counter 组件中，使用 useStore 自定义 Hook 获取 store，并使用 store.getState().count 获取当前 store 中的 count 数据。我们通过 handleAdd 和 handleMinus 来更新 store 中的数据。
异步操作
kanpo 还提供了 dispatch 方法，它可以接受一个函数作为参数，这个函数可以进行异步操作。
-- -------------------- ---- -------
----- -------- ----------- -
----- --- - ----- ---------------------------------
----- ---- - ----- -----------
------ -----
-
-------- ------------- -
----- ----- - -----------
----- -------- ----------------- -
--- -
----- ---- - ----- --------------------------
---------------- ---- ---
- ----- ----- -
-------------------
-
-
------ ------- ------------------------------- --------------
-在上面的代码中，我们定义了一个异步函数 fetchData，它会从服务器获取数据。在 MyComponent 组件中，我们通过 store.dispatch(fetchData) 来调用这个异步函数，并将返回的数据保存到 store 中。
后续学习
kanpo 提供了一种新的数据管理方式，如果你熟悉 Redux，你可以在使用 kanpo 后感觉 Redux 有些过时了。虽然 Redux 仍是一个流行的全局状态管理库，但如果你想要更加简洁的代码和更好的开发体验，可以尝试使用 kanpo。
当然，kanpo 的使用也需要一定的学习成本，你需要了解其 API 和设计思想，并深入理解其机制。如果你已经掌握了 kanpo 的基本用法，并想要深入了解它的实现原理，我建议你阅读一下源代码，或者参考文档中提供的更多例子和实践。
示例代码
-- -------------------- ---- ------- -- -------- ------ - -------------- ---------- - ---- -------- ------ - ----------- - ---- -------- ----- ----- - ------------- ------ -- --- ------ ----- ------------ - --------------------- ------ -------- ---------- - ------ ------------------------- -
-- -------------------- ---- -------
-- ----------
------ - -------- - ---- ----------
-------- --------- -
----- ----- - -----------
----- ----- - -----------------------
-------- ----------- -
---------------- ------ ----- - - ---
-
-------- ------------- -
---------------- ------ ----- - - ---
-
------ -
-----
-------------------
------- ------------------------------
------- --------------------------------
------
--
--- -------------------- ---- -------
-- ---------------
------ - -------- - ---- ----------
----- -------- ----------- -
----- --- - ----- ---------------------------------
----- ---- - ----- -----------
------ -----
-
-------- ------------- -
----- ----- - -----------
----- -------- ----------------- -
--- -
----- ---- - ----- --------------------------
---------------- ---- ---
- ----- ----- -
-------------------
-
-
------ ------- ------------------------------- --------------
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672eb0520b171f02e1e9f