# Redux-Model-TS

**Repository Path**: mirrors/Redux-Model-TS

## Basic Information

- **Project Name**: Redux-Model-TS
- **Description**: 基于Redux的面向对象封装，可减少一半的redux代码，让你专心写业务，同时在typescript中拥有100%的代码提示
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 11
- **Forks**: 0
- **Created**: 2019-07-08
- **Last Updated**: 2025-12-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<h1 align="center">
  <a href="https://redux-model.github.io/redux-model">
    Redux Model
  </a>
</h1>

[中文文档](./README.md)

Redux Model is created to enhance original redux framework, which has complex flow and lots of boilerplate.

[![License](https://img.shields.io/github/license/redux-model/redux-model)](https://github.com/redux-model/redux-model/blob/master/LICENSE)
[![GitHub Workflow Status (branch)](https://img.shields.io/github/workflow/status/redux-model/redux-model/CI/master)](https://github.com/redux-model/redux-model/actions)
[![Codecov](https://img.shields.io/codecov/c/github/redux-model/redux-model)](https://codecov.io/gh/redux-model/redux-model)


# Features

* Modular coding
* Modify reducer by MVVM
* **👍Absolutely 100% static type checking with typescript**
* Provide http service with loading and throttle
* Support react/vue hooks
* Support persist
* Support [Graphql](https://github.com/redux-model/graphql) request
* Support code splitting

# Installation

### React or 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
```

# Define Model
```typescript
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();
```

# Run Action
```typescript
testModel.plus();
testModel.plus(2);

testModel.getUser(3);
testModel.getUser(5).then(({ response }) => {});
```

# Get data in 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
```

# Get data in connect
```typescript jsx
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);
```

# Online Runnable Demos
* [Counter](https://codesandbox.io/s/redux-model-react-counter-zdgjh)
* [Persist](https://codesandbox.io/s/redux-model-react-persist-uwhy8)
* [Todo List](https://codesandbox.io/s/redux-model-react-todo-list-zn4nv)
* [Request](https://codesandbox.io/s/redux-model-react-request-1ocyn)
* [Request Throttle](https://codesandbox.io/s/redux-model-react-request-throttle-77mfy)
* [Listener](https://codesandbox.io/s/redux-model-react-listener-p7khk)
* [Compose](https://codesandbox.io/s/redux-model-react-compose-42wrc)
* [Action in Action](https://codesandbox.io/s/redux-model-react-action-in-action-oewkv)

# Documents

Here is the [document](https://redux-model.github.io/redux-model)

# Development
* git clone YOUR_FORK_REPO
* yarn install && yarn bootstrap

To check test, run `yarn test` <br>
To edit document, run `yarn docs`

---------------------

Feel free to use it and welcome to send PR to me.