在前端开发过程中，管理应用程序的状态是至关重要的。状态管理库是个好助手，可以帮助我们轻松地管理应用程序状态。今天介绍的是一个轻量级的状态管理库 -- tiny-state-manager。它可以利用 React 的 Context API 和 useReducer hook 来为我们管理应用程序状态。
安装
在命令行窗口中使用 npm 安装 tiny-state-manager：
npm install tiny-state-manager --save
使用
创建 store
首先在应用程序中创建一个 store。一个 store 包含了整个应用程序的状态和改变状态的 reducer。利用 createTinyStateManager 函数可以得到一个 store，它有三个参数：
initialState：应用程序的初始化状态；reducer：一个纯函数，用来在正确的行为和状态下遵循单一的不可变数据规则更改状态；options：一个可选对象，可设置可在程序中启用的错误消息等功能。
-- -------------------- ---- -------
------ - ---------------------- - ---- ---------------------
----- ------------ - -
--------- -----
--
----- ------- - ------- ------- -- -
------ ------------- -
---- ------------------
------ -
---------
--------- ---------------
--
--------
------ ------
-
--
----- ----- - ------------------------------------ ---------添加 provider
接下来将 store 作为 prop 传递给应用的根组件（例如，App）。使用 <StateManagerProvider> 包裹根组件，使组件树中的所有组件都可以访问 store。可以通过为包装器组件传递 store 属性来完成此操作。
import { StateManagerProvider } from 'tiny-state-manager'; // 在根组件内部引入
ReactDOM.render(
<StateManagerProvider store={store}>
<App />
</StateManagerProvider>,
document.getElementById('root')
);使用 state
现在可以在组件中使用状态了。通过使用 useContext hook 来访问 state。可以在组件中导入 state，然后在组件内部使用。
-- -------------------- ---- -------
------ ------ - ---------- - ---- --------
------ - ------------ - ---- ---------------------
-------- ------------- -
----- - ----- - - -------------------------
------ -
-----
----------------------
------
--
-dispatch action
要更新状态，请使用 dispatch 函数。dispatch 接收一个 action 对象并通知 reducer 更改状态。可以在组件中使用 dispatch 方法，但为了避免在大型应用程序中出现 prop drilling，引入一个 middleware 帮助处理行为并处理到 reducer。
const handleChangeLanguage = (newLanguage) => {
store.dispatch({
type: 'CHANGE_LANGUAGE',
payload: newLanguage,
});
};示例代码
-- -------------------- ---- -------
------ ------ - ---------- - ---- --------
------ - ----------------------- --------------------- ------------ - ---- ---------------------
----- ------------ - -
--------- -----
--
----- ------- - ------- ------- -- -
------ ------------- -
---- ------------------
------ -
---------
--------- ---------------
--
--------
------ ------
-
--
----- ----- - ------------------------------------ ---------
-------- ------------- -
----- - ----- - - -------------------------
------ -
-----
----------------------
------
--
-
----- -------------------- - ------------- -- -
----------------
----- ------------------
-------- ------------
---
--
----------------
--------------------- --------------
------------ --
------- ----------- -- ------------------------------------------
------- ----------- -- ---------------------------------- -- ----------------
------------------------
-------------------------------
--总结
tiny-state-manager 是一个轻量级、易于使用的状态管理库，有利于减少 prop drilling 的频率、整体上更易于维护和管理状态。这个库还提供了一个可扩展的 API，允许应用程序被完全按需定制。最重要的是，这个库并不要求学习新的概念，因为它依赖于 React 的 Context API 和 useReducer hook。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005663881e8991b448e232a