# redux-model
**Repository Path**: geekact/redux-model
## Basic Information
- **Project Name**: redux-model
- **Description**: 流畅的Redux模型,TS项目利器,支持 React, RN, Vue 和 Taro
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: https://fwh1990.gitee.io/redux-model
- **GVP Project**: No
## Statistics
- **Stars**: 7
- **Forks**: 0
- **Created**: 2019-06-20
- **Last Updated**: 2021-12-23
## Categories & Tags
**Categories**: utils
**Tags**: None
## README
# 废弃通知
**redux-model不再维护,请迁移到[foca](https://github.com/foca-js/foca)**
经过对状态库多年积累和实践,以及个人技术方面的成长,发现用class写状态开发效率还是不够高,因此创建了一套新的状态库 [foca](https://github.com/foca-js/foca) ,它更极致、更高效,算是redux-model的**重制版**。虽然都是基于redux,但幸运的是foca和redux-model可以在一个项目里同时使用,数据互不干扰,再次欢迎使用foca。
----------------------------
[English Document](./README-EN.md)
Redux-Model是为了弥补原生Redux繁琐的开发流程,开发者重复劳动效率低下,模板文件导致代码量臃肿,以及因action和reducer文件分散造成代码追踪困难的问题而设计的。
[](https://github.com/redux-model/redux-model/blob/master/LICENSE)
[](https://github.com/redux-model/redux-model/actions)
[](https://codecov.io/gh/redux-model/redux-model)
# 特性
* 深度封装,模块化开发
* 使用mvvm快速处理reducer
* **👍真正意义上的Typescript框架,写起来比JS更流畅**
* 内置http服务,请求action自带loading追踪、数据节流
* 支持React/Vue Hooks
* 支持数据持久化
* 支持[Graphql](https://github.com/redux-model/graphql)请求
* 支持代码分离
# 安装
### React 或 React-Native
```bash
npm install @redux-model/react
```
### Taro
```bash
# 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
```bash
# vue 3+
npm install @redux-model/vue
# vue 2+
npm install @redux-model/vue@6.9.2
```
# 定义模型
```typescript
interface Response {
id: number;
name: string;
}
interface Data {
counter: number;
users: Partial<{
[key: string]: Response;
}>;
}
class TestModel extends Model {
plus = this.action((state, step: number = 1) => {
state.counter += step;
});
getUser = $api.action((id: number) => {
return this
.get(`/api/users/${id}`)
.onSuccess((state, action) => {
state.users[id] = action.response;
});
});
protected initialState(): Data {
return {
counter: 0,
users: {},
};
}
}
export const testModel = new TestModel();
```
# 执行Action
```typescript
testModel.plus();
testModel.plus(2);
testModel.getUser(3);
testModel.getUser(5).then(({ response }) => {});
```
# 在 Hooks 中获取数据
```typescript jsx
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 中获取数据
```typescript jsx
type ReactProps = ReturnType;
const mapStateToProps = () => {
return {
counter: testModel.data.counter, // number
users: testModel.data.users, // object
loading: testModel.getUser.loading, // boolean
};
};
export default connect(mapStateToProps)(App);
```
# 在线运行示例
* [计数器](https://codesandbox.io/s/redux-model-react-counter-zdgjh)
* [数据持久化](https://codesandbox.io/s/redux-model-react-persist-uwhy8)
* [TODO面板](https://codesandbox.io/s/redux-model-react-todo-list-zn4nv)
* [请求](https://codesandbox.io/s/redux-model-react-request-1ocyn)
* [请求节流](https://codesandbox.io/s/redux-model-react-request-throttle-77mfy)
* [任务监听](https://codesandbox.io/s/redux-model-react-listener-p7khk)
* [任务组合](https://codesandbox.io/s/redux-model-react-compose-42wrc)
* [子任务](https://codesandbox.io/s/redux-model-react-action-in-action-oewkv)
# 文档
请点击[这里查看文档](https://redux-model.github.io/redux-model)
# 本地开发
* git clone 你fork的仓库
* yarn install && yarn bootstrap
执行测试用例请使用 `yarn test`
修改在线文档请使用 `yarn docs`
---------------------
欢迎使用并随时给我建议