代码拉取完成,页面将自动刷新
redux-model不再维护,请迁移到foca
经过对状态库多年积累和实践,以及个人技术方面的成长,发现用class写状态开发效率还是不够高,因此创建了一套新的状态库 foca ,它更极致、更高效,算是redux-model的重制版。虽然都是基于redux,但幸运的是foca和redux-model可以在一个项目里同时使用,数据互不干扰,再次欢迎使用foca。
Redux-Model是为了弥补原生Redux繁琐的开发流程,开发者重复劳动效率低下,模板文件导致代码量臃肿,以及因action和reducer文件分散造成代码追踪困难的问题而设计的。
npm install @redux-model/react
# taro 3+
npm install @redux-model/taro
# taro 2+
npm install @redux-model/taro@6.10.0 @tarojs/redux
# taro 1+
npm install @redux-model/taro@6.9.5 @tarojs/redux
# vue 3+
npm install @redux-model/vue
# vue 2+
npm install @redux-model/vue@6.9.2
interface Response {
id: number;
name: string;
}
interface Data {
counter: number;
users: Partial<{
[key: string]: Response;
}>;
}
class TestModel extends Model<Data> {
plus = this.action((state, step: number = 1) => {
state.counter += step;
});
getUser = $api.action((id: number) => {
return this
.get<Response>(`/api/users/${id}`)
.onSuccess((state, action) => {
state.users[id] = action.response;
});
});
protected initialState(): Data {
return {
counter: 0,
users: {},
};
}
}
export const testModel = new TestModel();
testModel.plus();
testModel.plus(2);
testModel.getUser(3);
testModel.getUser(5).then(({ response }) => {});
const data = testModel.useData(); // { counter: number, users: object }
const counter = testModel.useData((data) => data.counter); // number
const users = testModel.useData((data) => data.users); // object
const loading = testModel.getUser.useLoading(); // boolean
type ReactProps = ReturnType<typeof mapStateToProps>;
const mapStateToProps = () => {
return {
counter: testModel.data.counter, // number
users: testModel.data.users, // object
loading: testModel.getUser.loading, // boolean
};
};
export default connect(mapStateToProps)(App);
请点击这里查看文档
执行测试用例请使用 yarn test
修改在线文档请使用 yarn docs
欢迎使用并随时给我建议
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。
1. 开源生态
2. 协作、人、软件
3. 评估模型