@redux-model/vue
v9.0.6
Published
<h1 align="center"> <a href="https://redux-model.github.io/redux-model"> Redux Model </a> </h1>
Downloads
51
Maintainers
Readme
Redux-Model是为了弥补原生Redux繁琐的开发流程,开发者重复劳动效率低下,模板文件导致代码量臃肿,以及因action和reducer文件分散造成代码追踪困难的问题而设计的。
特性
- 深度封装,模块化开发
- 使用mvvm快速处理reducer
- 👍真正意义上的Typescript框架,写起来比JS更流畅
- 内置http服务,请求action自带loading追踪、数据节流
- 支持React/Vue Hooks
- 支持数据持久化
- 支持Graphql请求
- 支持代码分离
安装
React 或 React-Native
npm install @redux-model/react
Taro
# taro 3+
npm install @redux-model/taro
# taro 2+
npm install @redux-model/[email protected] @tarojs/redux
# taro 1+
npm install @redux-model/[email protected] @tarojs/redux
Vue
# vue 3+
npm install @redux-model/vue
# vue 2+
npm install @redux-model/[email protected]
定义模型
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();
执行Action
testModel.plus();
testModel.plus(2);
testModel.getUser(3);
testModel.getUser(5).then(({ response }) => {});
在 Hooks 中获取数据
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
在 connect 中获取数据
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);
在线运行示例
文档
请点击这里查看文档
本地开发
- git clone 你fork的仓库
- yarn install && yarn bootstrap
执行测试用例请使用 yarn test
修改在线文档请使用 yarn docs
欢迎使用并随时给我建议