%20(2).svg)
项目简介
本项目是基于 RxJS 的状态生成器库，适用于前端开发中状态和 UI 分离的开发模式。通过声明方式描述状态及其依赖和处理方式，利用工具构建，实现通用的开发模式（数据流）。该库可作为底层构建工具，复用状态声明实现逻辑复用，且经过严格测试，功能完备。
项目的主要特性和功能
- 状态声明式管理：以声明方式描述状态、依赖及处理方式，让状态管理更直观高效。
- 多场景适用：适用于组件开发与页面开发，能提供状态拆分方案处理状态过多的情况。
- 丰富的配置选项：支持调试日志、空值处理、重复值过滤等全局和局部配置。
- 灵活的使用方式：通过
useReGenhook 操作，方便获取状态和修改状态的方法。
安装使用步骤
前提条件
假设你已经下载了本项目的源码文件。
接入方式
使用该工具需提供一组配置项，单个配置项格式如下：
typescript
interface IConfigItem {
name: string;
init?: IConfigItemInit;
handle?: (arg: any) => ReturnResult;
distinct?: IDistinct;
reduce?: {
handle: (pre: any, val: any) => any;
init: any;
};
filterNil?: FilterNilStage;
depend?: {
names: string[];
handle: (args: any[]) => ReturnResult;
combineType?: CombineType;
};
}
具体使用可参照 apps/demo/src/config.ts 配置文件。
具体使用方法
- 创建配置项列表 ```typescript // 处理函数支持 async/await 以及返回 Observable 的形式 // 熟悉 RxJS 会有更好体验
export const RelationConfig: IConfigItem[] = [
{
name: "area",
handle(val) {
return of(val);
},
},
{
name: "region",
handle: (val: string[] = []) =>
from(val).pipe(
filter(Boolean),
map((item) => item?.toLocaleUpperCase()),
toArray()
),
},
{
name: "showRegion",
init: false,
depend: {
names: ["area"],
handle([show, area]: [show: boolean, area: string]) {
if (area === "CN") {
return true;
}
return false;
},
},
},
{
name: "testMoreDepend",
init: "",
depend: {
names: ["showRegion", "RegionList"],
handle: async ([testMoreDepend, showRegion, RegionList]: [
testMoreDepend: string[],
showRegion: boolean,
RegionList: string[]
]) => JSON.stringify(showRegion) + JSON.stringify(RegionList?.length),
},
}
];
2. **使用 hook 进行操作**
通过包导出的 `useReGen` 方法，分别传入 `CacheKey` 以及 `RelationConfig` 参数进行调用：typescript
// 使用方法
const {
area,
region,
ReGenValue: {setValue, getValue, getAtom}
} = useReGen( "CacheKey", RelationConfig );
``
函数返回对象，可解构获取状态值，还能从ReGenValue` 中解构出获取或修改值的方法。
全局可选配置项
调试日志
日志服务使用 rxjs-watcher 库，开启方法是传入第三项配置项 logger: { duration?:number } | boolean | number，如需查看每个 Observable 具体情况，请安装 rxjs-watcher 相关浏览器插件。
typescript
ReGen( CacheKey, RelationConfig, { logger: { duration: 300 } } )
空值处理
```typescript // 全局配置 // 默认值 false // type FilterNilStage = "All" | "Default" | "In" | "HandleAfter" | "DependAfter" | "Out" // All 表示全局开启过滤 // Default 表示默认策略（处于 In 和 Out 阶段且不进行过滤） // "In" | "HandleAfter" | "DependAfter" | "Out" 表示不同的阶段进行空值处理
useReGen( "CacheKey", RelationConfig, { filterNil: FilterNilStage | boolean } );
// 局部配置 // 单独对当前状态进行空值过滤 // 优先级高于全局配置 [{ name: "area", filterNil: FilterNilStage | boolean }] ```
重复值过滤
默认全局开启，使用 ramda 中的 equals 进行对比。
```typescript
// 全局配置
useReGen( CacheKey, RelationConfig, { distinct: true } );
// 局部配置 // 单独对当前状态进行去重 // 建议使用布尔值进行配置，如需使用高级方法，可参见 RxJS distinctUntilChanged 操作符相关设置 [{ name: "area", distinct: IDistinct }]
type IDistinct
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】