README-EN.md

Redux Model

中文文档

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

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 request
• Support code splitting

Installation

React or React-Native

npm install @redux-model/react

Taro

# 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

# vue 3+
npm install @redux-model/vue

# vue 2+
npm install @redux-model/vue@6.9.2

Define Model

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

testModel.plus();
testModel.plus(2);

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

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

Get data in 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);

Online Runnable Demos

• Counter
• Persist
• Todo List
• Request
• Request Throttle
• Listener
• Compose
• Action in Action

Documents

Here is the document

Development

• git clone YOUR_FORK_REPO
• yarn install && yarn bootstrap

To check test, run yarn test
To edit document, run yarn docs

---

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