Score
0
2 Unstar Star 5 Fork 0

fwh1990 / redux-modelTypeScriptMIT

Create your Gitee Account
Explore and code with more than 5 million developers,Free private repositories !:)
Sign up
流畅的Redux模型,TS项目利器,支持 React, RN, Vue 和 Taro spread retract

https://fwh1990.gitee.io/redux-model

Clone or download
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README-EN.md

Redux Model

中文

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

Lots of famous state framework are designed for JS users. They totally follow design mode and hide everything you needn't see, it means you are difficult to combine these frameworks with typescript unless you inject type interface manually. Fortunately, Redux-Model is specially designed for typescript, feel free to inject once, use everywhere.

License GitHub Workflow Status (branch) Codecov

Features

  • Highest coding efficiency
  • Modify reducer by MVVM
  • Absolutely 100% static type checking with typescript
  • Provide http service, combine loading and throttle for each request action
  • Support react/vue hooks
  • Persist data

Installation

React or React-Native

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

Vue v3

npm install @redux-model/vue redux

Taro v3

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

Others

  • For taro < v3, install @redux-model/taro@6.9.2 instead
  • For vue < v3, 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 Vue Hooks

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

<script>
export default {
    setup() {
        const increase = () => {
            testModel.increase();
            testModel.getUser(3);
        };

        const counter = testModel.useData((data) => data.counter);
        const loading = testModel.getUser.useLoading();

        return {
            increase,
            counter,
            loading,
        };
    }
};
</script>

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);

Demos

Documents

Here is the document


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

Comments ( 0 )

Sign in for post a comment

TypeScript
1
https://gitee.com/fwh1990/redux-model.git
git@gitee.com:fwh1990/redux-model.git
fwh1990
redux-model
redux-model
master

Search

131423 f1aaba0b 1899542 094922 1c74bed3 1899542