@redux-model/react NPM

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

Features

Less code and higher efficiency
Modify reducer by MVVM
Absolutely 100% static type checking with typescript
Trace loading status for each request action
Support react hooks

Installation

React or React-Native

npm install @redux-model/react redux react-redux

Taro v3

npm install @redux-model/taro redux react-redux

Vue v3

npm install @redux-model/vue redux

Others

For taro < 3, install @redux-model/taro@6.9.2 instead
For vue < 3, install @redux-model/vue@6.9.2 instead

Define Model

interface Response {
  id: number;
  name: string;
}

interface Data {
  counter: number;
  users: Partial<{
    [key: string]: Response;
  }>;
}

class TestModel extends Model<Data> {
    increase = this.action((state) => {
        state.counter += 1;
    });

    getUser = $api.action((id: number) => {
        return this
            .get<Response>(`/api/user/${id}`)
            .onSuccess((state, action) => {
                state.counter += 1;
                state.users[id] = action.response;
            });
    });

    protected initReducer(): Data {
        return {
            counter: 0,
            users: {},
        };
    }
}

export const testModel = new TestModel();

With React Hooks

import React, { FC } from 'react';

const App: FC = () => {
    const counter = testModel.useData((data) => data.counter);
    const loading = testModel.getUser.useLoading();

    const increase = () => {
        testModel.increase();
        testModel.getUser(3);
    };

    return (
        <button onClick={increase}>
            {loading ? 'Waiting...' : `You clicked ${counter} times`}
        </button>
    );
};

export default App;

With Redux connect

import React, { Component } from 'react';
import { connect } from 'react-redux';

type Props = ReturnType<typeof mapStateToProps>;

class App extends Component<Props> {
    increase() {
        testModel.increase();
        testModel.getUser(3);
    }

    render() {
        const { loading, counter } = this.props;
        return (
            <button onClick={this.increase}>
                {loading ? 'Waiting...' : `You clicked ${counter} times`}
            </button>
        );
    }
}

const mapStateToProps = () => {
    return {
        counter: testModel.data.counter,
        loading: testModel.getUser.loading,
    };
};

export default connect(mapStateToProps)(App);

With Vue

<template>
  <button @click="increase">
    {{loading ? 'Waiting...' : `You clicked ${counter} times`}}
  </button>
</template>

<script>
export default {
  name: 'HelloWorld',
  methods: {
    increase() {
      testModel.increase();
      testModel.getUser(3);
    },
  },
  computed: {
    counter() {
      return testModel.data.counter;
    },
    loading() {
        return testModel.getUser.loading;
    },
  },
};
</script>