Rekv 是一个为 React 函数式组件设计的全局状态管理器，且对类组件具有很好的兼容，所有方法与状态均有 TypeScript 提示
- 一个简单但易用的状态管理器
- 无 Redux，无依赖，gzip 后仅有 1.5 KB
- 不使用高阶组件（HOC）
- 支持 Hooks 与类组件
- 高性能，使用 Key-Value 而不是树型结构来处理状态
- 方法与状态都支持 TypeScript 静态检查
- 支持状态变更事件委托（拦截器）
yarn add rekv版本要求：React 版本 >= 16.8.0
可创建多个 store，并对每个状态进行 TypeScript 静态检查
使用 Rekv 创建一个 store
// store.ts
import Rekv from 'rekv';
export default new Rekv({
name: 'test',
count: 0,
});使用状态
import React from 'react';
import store from './store';
export default function Demo() {
const s = store.useState('name', 'count');
return (
<div>
{s.name}, {s.count}
</div>
);
}在另一个组件内更新状态
import React from 'react';
import store from './store';
// 重置计数器
function reset() {
store.setState({ count: 0 });
}
function increment() {
store.setState((state) => ({ count: state.count + 1 }));
}
function decrement() {
store.setState((state) => ({ count: state.count - 1 }));
}
export default function Buttons() {
return (
<div>
<button onClick={reset}>reset</button>
<button onClick={increment}>+1</button>
<button onClick={decrement}>-1</button>
</div>
);
}import React, { Component } from 'react';
import store from './store';
export default class MyComponent extends Component {
s = store.classUseState(this, 'count');
render() {
return <div>{this.s.count}</div>;
}
}// store.ts
import Rekv from 'rekv';
interface InitState {
name: string;
age?: number;
}
const initState: InitState = {
name: 'Jack',
age: 25,
};
const store = new Rekv(initState);
export default store;// User.ts
import React from 'react';
import store from './store';
export default function User() {
// name 将被推断为 string 类型
// age 将被推断为 number | undefined 类型
const s = store.useState('name', 'age');
return (
<div>
{s.name}, {s.age}
</div>
);
}import store from './store';
// 获取当前时刻的状态
store.currentState;
// 或
store.getCurrentState(); // 兼容旧版本的 APIimport store from './store';
store.delegate = {
beforeUpdate: ({ state }) => {
console.log('beforeUpdate', state);
// 可在这里拦截 setState 的值，并进行修改
return state;
},
afterUpdate: ({ state }) => {
// afterUpdate 的 state 只包含了需要更新的状态
console.log('afterUpdate', state);
},
};import Rekv from 'rekv';
// 定义副使用
const store = new Rekv(
{ foo: 'bar', ret: null },
{
effects: {
changeFoo(name: string) {
this.setState({ foo: name });
},
// 定义异步副作用
async loadResource() {
const ret = await fetchUrl('...');
this.setState({
ret,
});
},
},
}
);
// 使用副作用
store.effects.changeFoo('hello');
// 使用异步副作用
await store.effects.loadResource();-
class Rekv
-
new Rekv(object)
创建一个
Rekv的实例 -
全局事件委托，可设置所有
Rekv实例的事件委托-
beforeUpdate状态更新前的事件，可对设置的状态进行拦截，检查并修改import Rekv from 'rekv'; // 所有 `Rekv` 的实例，在更新前都将执行此方法 // state: 使用 setState() 更新的状态值 // store: 需要更新状态的 store // 返回值: 如果需要拦截并修改 setState 的值，可返回一个新的对象，替换 setState 的值 Rekv.delegate.beforeUpdate = ({ state, store }) => { console.log(store.currentState, state); // return state; // 可选，如果返回了新的值，则可实现对状态的拦截修改 };
-
afterUpdate状态更新后的事件，返回已更新的状态import Rekv from 'rekv'; // 所有的 `Rekv` 实例，在完成状态更新后，执行此方法 // state: 已更新的状态（这里已过滤掉未发生改变的状态） // store: 已更新状态的 store Rekv.delegate.afterUpdate = ({ state, store }) => { console.log(store.currentState, state); };
-
-
-
globalStoreglobalStore 是一个默认创建的
Rekv类的实例，可使用Rekv实例的所有方法与属性 -
Rekv 实例属性与方法
-
.delegate使用方式与 全局事件委托 相同实例的事件委托，如果和全局的事件委托同时设置了，会优先执行实例的事件委托，再执行全局的事件委托，使用方式用全局事件委托相同
-
.currentState获取当前时刻实例的状态 -
.getCurrentState()与.currentState功能相同 -
.useState()在函数式组件中订阅并使用状态，通过设置多个参数，可在一行使用多个状态
import React from 'react'; import store from './store'; function Demo() { const s = store.useState('foo', 'bar'); return ( <div> {s.foo}, {s.bar} </div> ); }
-
.setState()对状态进行更新import store from './store'; // 方法1: 直接设置状态 store.setState({ count: 1 }); // 方法2: 使用一个回调函数，获取当前状态，并返回新的状态 // state: 当前状态 store.setState((state) => { return { count: state.count + 1, }; });
-
.classUseState()在类组件中使用状态
-
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent