Author : Clay.W.

Tango Store 状态管理库

简介

Tango 是一个基于React的极简状态管理库，仅用了 100 行代码实现了状态的跨组件同步更新，包大小仅 7kb，可在项目中放心使用，且不会有性能损耗！

优势

• 轻量灵活：体积小，功能实用，无需搭配额外库。
• 事件驱动：状态变化通过事件通知订阅者。
• 持久化支持：原生支持状态持久化存储。
• 字段级持久化：可指定部分字段进行持久化。
• 极简订阅机制：支持订阅与取消订阅，防止内存泄漏。
• React Hook 支持：提供 useTango Hook，简化组件状态使用。
• 同步数据流：所有状态都是同步的，数据流可追踪。

好处

• 状态共享便捷，适合中小型项目。
• 极少样板代码，提升开发体验。
• 数据持久化，避免页面刷新状态丢失。
• 灵活性高，满足不同业务需求。
• 安全默认值，防止 key 不存在时抛错。

新特性

• 简单易用：createTangoStore 和 useTango 提供了简洁的 API，方便用户创建 Store 和订阅状态。
• 默认值保护：确保状态的默认值不会被未定义的值覆盖。
• 状态变化检查：只有状态真正发生变化时，才派发事件，减少无效更新。
• 错误处理：在 useTango 中访问不存在的 key 时返回默认值，而不会抛出错误。

关键功能

• 订阅状态：通过 store.subscribe 订阅状态变化。
• 响应状态变化：状态变化时，更新组件的局部状态，触发组件重新渲染。
• 取消订阅：在组件卸载时，取消订阅，避免内存泄漏。

实现细节

• useState：在组件中维护局部状态，初始值为 store.getState()[key]。
• useEffect：组件挂载时订阅状态变化，卸载时取消订阅。当 store 派发 change 事件时，useTango 获取最新状态并更新局部状态。
• 性能优化：状态更新时仅触发订阅函数，避免不必要的重新渲染。
• React 生态：通过 useTango Hook 集成到 React 生态，支持状态变化自动更新 UI。

工作流程

1. 创建 Store：用户通过 createTangoStore 创建 TangoStore 实例，并传入初始状态。
2. 更新状态：用户通过 store.setState 更新状态，TangoStore 会派发 change 事件，影响使用 useTango Hook 的组件。
3. 订阅状态：在 React 组件中，用户通过 useTango Hook 订阅 TangoStore 的状态变化。状态变化时，useTango 更新组件局部状态，触发重新渲染。
4. 取消订阅：组件卸载时，useTango 会自动取消订阅，避免内存泄漏。

如何使用

1. 安装

npm i tango-store-cw

2. 创建仓库

在目录中创建 store.js 说明：createTangoStore() 是一个工厂函数，用于创建 TangoStore 实例。用户可以传入初始状态 initialState，函数会返回一个新的 TangoStore 实例。

import { createTangoStore } from "tango-store-cw";
 
// 定义初始值
export const initialValue = createTangoStore({ name: "小明", age: 18 });

// 定义更新函数
export const setName = (v) => {
  initialValue.setState({ name: v });
};

export const setAge = (v) => {
  initialValue.setState({ age: v });
};

3. 使用

页面 A 展示数据 说明：useTango Hook，用于在 React 组件中订阅 TangoStore 的状态变化，并返回指定 key 对应的状态值。

import React from "react";
import { initialValue } from "@/TangoStore/TangoStore";
import { useTango } from "tango-store-cw";

const CaseA = () => {
  const name = useTango(initialValue, "name"); 
  const age = useTango(initialValue, "age"); 

  return (
    <div>
      <h1>CaseA页面</h1>
      <TSpace>Tango中的名字：{name}</TSpace>
      <TSpace>Tango中的年龄：{age}</TSpace>
    </div>
  );
};

export default CaseA;

页面 B 修改数据 说明： 导入更新函数 setName、setAge，修改初始值

import React from "react";
import { setName, setAge } from "@/TangoStore/TangoStore";

const CaseB = () => {
  const ChangeValue = () => {
    setName("小红");
    setAge(20);   
  };

  return (
    <div>
      <h1>CaseB页面</h1>
      <TButton onClick={ChangeValue}>修改CaseB的数据</TButton>
    </div>
  );
};

export default CaseB;

持久化

Eternity: true

1. 格式

const myStore = createTangoStore(
  initialValue: {},
  options: { 
    storageKey: '',
    Eternity: Boolean,
    Storage: ''
  },  
  persistentFields: [] 
);

2. 示例

const myStore = createTangoStore(
  { user: 'John Doe', theme: 'dark' },
  { storageKey: 'my-store', Eternity: true, Storage: 'session'},  
  ['theme'] 
);

说明： 初始值为 user: 'John Doe', theme: 'dark'， 开启了持久化 Eternity: true， 持久化键名 storageKey: 'my-store'，Storage: 'session'，指定使用 sessionStorage 持久化，指定 theme 字段可以持久化。

改进与反馈

感谢您的使用！ 如果您使用后发现了一些问题或有一些更好的改进建议， 请联系：[email protected] 给予我反馈，感谢您！In the future, we're going to update English document!