什么是 recall-state
recall-state 是一个帮助开发者简化状态管理的 npm 库，它提供了一种基于 Redux 的集中式数据管理方案，可以轻松地实现组件之间的数据传递和共享。
安装
你可以使用 npm 来安装 recall-state：
npm i recall-state
使用教程
初始化状态
在你的项目中，你需要引入 createStore 方法来创建一个 redux 状态容器，并在其中初始化一些数据：
-- -------------------- ---- ------- ------ - ----------- - ---- -------- ------ ----------- ---- --------------- -- ----- ----- --------- - - ------ -- ----- -------- -- -- -- ----- -- ----- ----- - ------------------------------------
在这个例子中，我们初始化了一个状态对象 initState，它包含了 count 和 name 两个属性。接下来，我们使用 createStore 方法创建了一个 redux 容器，并将 recallState 方法作为参数传递给它，recallState 方法实际上是一个 redux 中间件，它帮助我们简化了在组件中使用 redux 的过程。
在组件中使用状态
在你的组件中，你可以使用 connect 方法来连接到 redux 容器，并获取回调函数中需要的状态数据：
-- -------------------- ---- -------
------ - ------- - ---- --------------
----- ------- - ------- -- -
----- - ----- - - ------
------ -
-----
--------------
------- ----------- -- ---------------- ----- ----------- ----
--
---------
------
--
--
----- --------------- - ------- -- -
------ -
------ ------------
--
--
------ ------- ----------------------------------在这个例子中，我们使用 connect 方法将 Counter 组件与 redux 容器连接起来。在 mapStateToProps 回调函数中，我们映射了 state 对象中的 count 属性到组件中的 props 中，这样我们就可以在组件中使用它了。
接下来，我们将 dispatch 方法作为 props 传递给了组件，当按钮被点击时，我们将 { type: "INCREMENT" } 这个对象作为参数传递给 dispatch 方法，它会触发我们在初始化状态时定义的 reducer 函数：
-- -------------------- ---- -------
----- ------- - ------- ------- -- -
------ ------------- -
---- ------------
------ - --------- ------ ----------- - - --
--------
------ ------
-
--
----- ----- - ---------------------------------- ----------在这个例子中，我们定义了一个 reducer 函数，它接受两个参数，state 和 action。当 type 属性为 INCREMENT 时，我们将 count 属性加一并返回一个新的 state 对象。
在多个组件之间共享状态
在你的应用程序中，你可能会需要在多个组件之间共享一些状态数据。为了实现这个目标，你可以使用 recall-state 提供的 withConnect 高阶组件：
-- -------------------- ---- -------
------ - ----------- - ---- ---------------
----- ----------- - ------- -- -
----- - ----- ------------ - - ------
------ -
-----
-------------
------ ----------- ------------ ----------------------- --
------
--
--
----- ------------------ - ---------- -- -
------ -
------------- ------- --
----------
----- --------------
-------- -------------------
---
--
--
------ ------- ---------------------------------------------在这个例子中，我们使用了 withConnect 高阶组件，并注入了 mapDispatchToProps 回调函数。在 mapDispatchToProps 回调函数中，我们将键值对 onNameChange 注入到 props 中，并在 input 元素中使用它来更新 name 属性，当 input 的值变化时，它会触发 CHANGE_NAME 这个 action，在 reducer 函数中，我们再更新 name 属性即可：
-- -------------------- ---- -------
----- ------- - ------- ------- -- -
------ ------------- -
---- --------------
------ - --------- ----- -------------- --
--------
------ ------
-
--
----- ----- - ---------------------------------- ----------总结
recall-state 是一个非常实用的 npm 包，它可以帮助我们简化 redux 的使用过程，并提供了一种集中式数据管理的方案，让我们的代码更加简洁、易于维护。学会了 recall-state 的使用，你将可以更加自如地掌握前端开发中的状态管理技能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562d281e8991b448e01db