Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/wangtao0101/resa
A simple framework based on redux, redux-saga, redux-action.
https://github.com/wangtao0101/resa
redux redux-saga typescript
Last synced: about 1 month ago
JSON representation
A simple framework based on redux, redux-saga, redux-action.
- Host: GitHub
- URL: https://github.com/wangtao0101/resa
- Owner: wangtao0101
- License: mit
- Created: 2017-07-03T03:07:16.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T15:16:44.000Z (about 2 years ago)
- Last Synced: 2024-04-14T08:35:18.401Z (9 months ago)
- Topics: redux, redux-saga, typescript
- Language: TypeScript
- Homepage: https://wangtao0101.github.io/resa
- Size: 1.94 MB
- Stars: 25
- Watchers: 2
- Forks: 0
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# resa
[](https://www.npmjs.com/package/resa)
[](https://travis-ci.org/wangtao0101/resa)
[](https://coveralls.io/github/wangtao0101/resa?branch=master)
[以中文查看](https://github.com/wangtao0101/resa/blob/master/README_CN.md)
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](https://github.com/dvajs/dva),
[mirror](https://github.com/mirrorjs/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.
* [count](https://github.com/wangtao0101/resa/tree/master/examples/count) [codesandbox](https://codesandbox.io/s/6vyx2nvn6w)
## First sight
Define model
```
// AppModel.ts
import { Model, reducer, init, effect } from 'resa';
import { delay } from 'redux-saga';
interface AppState {
count: number;
}
@init({
name: 'appModel',
namespace: 'namespace',
state: {
count: 0 // type check here
}
})
export default class AppModel extends Model {
@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 {
render() {
return (
{this.props.appModel.state.count}
{/* add and addAsync have been transformed to action creaters,
you just call them with arguments(type check payload)
*/}
this.props.appModel.add(1)}>+ {/* type check here */}
this.props.appModel.addAsync(2)}>async {/* type check here */}
wapper(this.props.appModel.addAsync(2)).then(() => {
alert('callback');
})
}>
promise
);
}
}
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(
,
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
* [Full Documentation](https://wangtao0101.github.io/resa)
## 4.0 Break Change
## Contributing
Pull requests and stars are always welcome. For bugs and feature requests, [please create an issue](https://github.com/wangtao0101/resa/issues).