5.2.1 • Published 4 years ago

resa v5.2.1

Weekly downloads
6
License
MIT
Repository
github
Last release
4 years ago

resa

NPM version Build Status Coverage Status

以中文查看

A simple framework based on typescript, redux, redux-saga, redux-action.

Installation

npm install resa --save
yarn add resa

Features

  • No redundant redux boilerplate code
  • Full IntelliSense with vscode and typescript
  • Typed redux store
  • Typed action creater and payload
  • Better side effects control with redux-saga
  • Action creater born to be promise
  • Better error handling, support use promise.catch to capture error
  • auto detect dependence of state, without mapStateToProps, more easy than connect of react-redux
  • Easy learn, easy write, easy test

Motivation

Actually i like redux and redux-saga very much, but both them have many problems and they are not completely solved by existing packages like dva, mirror:

  • Boilerplate code is everywhere when using redux, react-redux, redux-saga, redux-actions in the big project
  • no IntelliSense
  • no Type-safe
  • terrible error handling in redux-saga

Examples

We hava integrated redux-devtool in online-vscode, you can click Open in New Window button and open chrome redux-devtool to see what action will be dispathed when you click button.

First sight

Define model

// AppModel.ts
import { Model, reducer, init, effect } from 'resa';
import { delay } from 'redux-saga';

interface AppState {
    count: number;
}

@init<AppState>({
    name: 'appModel',
    namespace: 'namespace',
    state: {
        count: 0 // type check here
    }
})
export default class AppModel extends Model<AppState> {
    @effect() // define saga: async action handle
    * addAsync(count: number) {
        yield delay(2000);
        this.add(count); // type check here
    }

    @reducer() // define redux reducer: sync action handle
    add(count: number) {
        return {
            count: this.state.count + count, // type check here
        };
    }
}

Define component

// App.tsx
import * as React from 'react';
import AppModel from './AppModel';
import { subscribe, wapper } from 'resa';

interface AppProps {
    appModel: AppModel; // annotation type, will inject by subscribe
}

class App extends React.Component<AppProps> {
    render() {
        return (
            <div className="App">
                <h1>{this.props.appModel.state.count}</h1>
                {/* add and addAsync have been transformed to action creaters,
            you just call them with arguments(type check payload)
        */}
                <button onClick={() => this.props.appModel.add(1)}>+</button> {/* type check here */}
                <button onClick={() => this.props.appModel.addAsync(2)}>async</button> {/* type check here */}
                <button
                    onClick={() =>
                        wapper(this.props.appModel.addAsync(2)).then(() => {
                            alert('callback');
                        })
                    }>
                    promise
                </button>
            </div>
        );
    }
}

const NewApp = subscribe({ appModel: AppModel })(App);
export default NewApp;

wapper with Provider like react-redux

import createResa, { Provider } from 'resa';

import App from './App';
const app = createResa();

ReactDOM.render(
  <Provider resa={app}>
    <App />
  </Provider>,
  document.getElementById('root') as HTMLElement
);

So, do you like the simplicity ?

What is resa?

resa = a simple way to use redux and redux-saga

Docs

4.0 Break Change

Contributing

Pull requests and stars are always welcome. For bugs and feature requests, please create an issue.

5.2.1

4 years ago

5.2.0

4 years ago

5.1.0

5 years ago

5.1.0-alpha.1

5 years ago

5.0.0

5 years ago

5.0.0-alpha.2

5 years ago

5.0.0-alpha.1

5 years ago

5.0.0-alpha.0

5 years ago

4.2.2

5 years ago

4.2.1

5 years ago

4.1.1

5 years ago

4.1.1-alpha.0

5 years ago

4.1.0

5 years ago

4.0.1

5 years ago

4.0.0

6 years ago

4.0.0-beta-5

6 years ago

4.0.0-beta-4

6 years ago

4.0.0-beta-3

6 years ago

4.0.0-beta-2

6 years ago

3.1.2

6 years ago

3.1.1

6 years ago

3.1.0

6 years ago

3.0.2

6 years ago

3.0.1

6 years ago

3.0.0

6 years ago

3.0.0-rc.13

6 years ago

3.0.0-rc.12

6 years ago

3.0.0-rc.11

6 years ago

3.0.0-rc.10

6 years ago

3.0.0-rc.9

6 years ago

3.0.0-rc.8

6 years ago

3.0.0-rc.7

6 years ago

3.0.0-rc.6

6 years ago

3.0.0-rc.5

6 years ago

3.0.0-rc.4

6 years ago

3.0.0-rc.3

6 years ago

3.0.0-rc.2

6 years ago

3.0.0-rc.1

6 years ago

2.7.1

6 years ago

2.7.0

6 years ago

2.6.0

6 years ago

2.5.0

6 years ago

2.4.0

6 years ago

2.3.0

6 years ago

2.2.1

6 years ago

2.2.0

6 years ago

2.1.4

6 years ago

2.1.3

6 years ago

2.1.2

6 years ago

2.1.1

6 years ago

2.1.0

7 years ago

2.0.0

7 years ago

1.3.0

7 years ago

1.2.0

7 years ago

1.1.0

7 years ago

1.0.0

7 years ago

0.1.6

7 years ago

0.1.5

7 years ago

0.1.4

7 years ago

0.1.3

7 years ago

0.1.2

7 years ago

0.1.1

7 years ago

0.1.0

7 years ago