前言
在 Web 开发中，状态管理是必不可少的一项技术。但是，状态管理的实现方式千差万别，前端开发者常常会被纷繁复杂的技术选项和不同的使用方式所困惑。本文将介绍一种使用简单但功能强大的状态管理工具：npm 包 @react-shared/ootb-store。
什么是 @react-shared/ootb-store
@react-shared/ootb-store 是一个 out-of-the-box 的状态管理工具。它提供了一种简单、灵活的状态管理方案，并且可以轻松地与 React 应用进行集成。@react-shared/ootb-store 的主要功能包括：
- 订阅/发布模式：通过订阅/发布模式，可以轻松地监听和更新状态。
- 持久化存储：@react-shared/ootb-store 支持将状态数据保存到本地存储，防止重新加载页面后状态丢失。
- 极小体积：@react-shared/ootb-store 的体积非常小，仅为 2KB 左右，可以轻松地集成到任何项目中。
- TypeScript 支持：@react-shared/ootb-store 支持 TypeScript，可以提供更好的类型安全性和编码体验。
如何使用 @react-shared/ootb-store
使用 @react-shared/ootb-store 可以分为以下步骤：
第一步：安装
@react-shared/ootb-store 可以通过 npm 安装。在命令行工具中，输入以下命令即可安装：
npm i --save @react-shared/ootb-store
第二步：创建 store
在 React 应用中使用 @react-shared/ootb-store，首先需要创建 store。可以使用 createOotbStore 函数来创建 store：
import { createOotbStore } from '@react-shared/ootb-store';
export const store = createOotbStore({
count: 0,
});createOotbStore 函数接收一个对象作为参数，该对象包含当前 store 的默认状态值。在上面的代码中，我们创建了一个 count 状态值并将其设置为 0。
第三步：更新状态
要更新当前 store 中的状态值，可以使用 set 方法：
store.set('count', 1);set 方法接收两个参数：key 和 value。key 表示要更新的状态值的名称，value 表示更新后的状态值。
第四步：订阅状态
要订阅当前 store 中的状态值的更改，可以使用 subscribe 方法：
store.subscribe('count', (newValue, oldValue) => {
console.log(`count changed from ${oldValue} to ${newValue}`);
});subscribe 方法接收两个参数：key 和监听的回调函数。回调函数将接收两个参数：newValue 和 oldValue。newValue 表示更新后的状态值，oldValue 表示更新前的状态值。
第五步：持久化存储
@react-shared/ootb-store 支持将状态数据保存到本地存储。默认情况下，@react-shared/ootb-store 使用 localStorage 保存状态数据。要启用本地存储功能，可以在创建 store 时传递一个 options 对象：
export const store = createOotbStore({
count: 0,
}, {
storage: localStorage,
storageKey: 'my-store',
});options 对象包含两个属性：
- storage：指定要使用的存储介质。
- storageKey：指定要使用的存储键名。
示例代码
下面的示例代码演示了如何使用 @react-shared/ootb-store：
-- -------------------- ---- ------- ------ - --------------- - ---- --------------------------- ------ ----- ----- - ----------------- ------ -- --- ------------------------ ---------- --------- -- - ------------------ ------- ---- ----------- -- -------------- --- ------------------ --- -------------------------------- -- ------- -
总结
@react-shared/ootb-store 是一个简单但功能强大的状态管理工具，可以轻松地与 React 应用进行集成。本文介绍了 @react-shared/ootb-store 的基本用法，并提供了示例代码。希望本文能够帮助你更好地理解和使用 @react-shared/ootb-store。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055b7e81e8991b448d909d