Based on redux and react-redux.
Warehouse address: github.com/foca-js/foca
Document address: foca.js.org
idea
TS First, no TS without programming!
characteristic
- Modular development
- Focus on the ultimate experience of typescript
- The model is automatically registered and can be used after export
- Built-in immer to quickly process data
- Intelligently track the execution status of asynchronous functions
- Model supports private methods
- Customizable multi-engine data persistence
- Data isolation, allowing the coexistence of similar state libraries
Architecture diagram
Try it online
use
Define the model
// File: counterModel.ts
import { defineModel } from 'foca';
const initialState: { count: number } = {
count: 0,
};
// 无须手动注册到store,直接导出到react组件中使用
export const counterModel = defineModel('counter', {
// 初始值,必填属性,其他属性均可选
initialState,
actions: {
// state可自动提示类型 { count: number }
plus(state, value: number, double: boolean = false) {
// 直接修改状态
state.count += value * (double ? 2 : 1);
},
minus(state, value: number) {
// 直接返回新状态
return { count: state.count - value };
},
// 私有方法,只能在模型内部被effect方法调用,外部调用则TS报错(属性不存在)
_clear(state) {
return this.initialState;
},
},
effects: {
// 异步函数,自动追踪执行状态(loading)
async doSomething() {
// 调用私有方法
await this._sleep(100);
// 快速处理状态,对于网络请求的数据十分方便
this.setState({ count: 1 });
this.setState((state) => {
state.count += 1;
});
// 调用action函数处理状态
this.plus(1, true);
// 调用effect函数
return this.commonUtil(1);
},
// 普通函数
commonUtil(x: number) {
return x + 1;
},
// 私有方法,只能在模型内部使用,外部调用则TS报错(属性不存在)
_sleep(duration: number) {
return new Promise((resolve) => {
setTimeout(resolve, duration);
});
},
},
hooks: {
// store初始化完成后触发onInit钩子
onInit() {
this.plus(1);
console.log(this.state);
},
},
});
Use in function components
import { FC, useEffect } from 'react';
import { useModel, useLoading } from 'foca';
import { counterModel } from './counterModel';
const App: FC = () => {
// count类型自动提示 number
const { count } = useModel(counterModel);
// 仅effects的异步函数能作为参数传入,其他函数TS自动报错
const loading = useLoading(counterModel.doSomething);
useEffect(() => {
counterModel.doSomething();
}, []);
return (
<div onClick={() => counterModel.plus(1)}>
{count} {loading ? 'Loading...' : null}
</div>
);
};
export default App;
Use in class components
import { Component } from 'react';
import { connect, getLoading } from 'foca';
import { counterModel } from './counterModel';
type Props = ReturnType<typeof mapStateToProps>;
class App extends Component<Props> {
componentDidMount() {
counterModel.doSomething();
}
render() {
const { count, loading } = this.props;
return (
<div onClick={() => counterModel.plus(1)}>
{count} {loading ? 'Loading...' : null}
</div>
);
}
};
const mapStateToProps = () => {
return {
count: counterModel.state.count,
loading: getLoading(counterModel.doSomething);
};
}
export default connect(mapStateToProps)(App);
Hope to be the status management solution for your next project! Star it first if you like it.
Warehouse address: https://github.com/foca-js/foca
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。