https://github.com/deepfunc/redux-balloon
Lightweight business framework for Redux apps.
https://github.com/deepfunc/redux-balloon
Last synced: 25 days ago
JSON representation
Lightweight business framework for Redux apps.
- Host: GitHub
- URL: https://github.com/deepfunc/redux-balloon
- Owner: deepfunc
- License: mit
- Created: 2018-10-31T07:15:20.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-08-07T05:57:58.000Z (over 2 years ago)
- Last Synced: 2025-12-25T16:33:43.598Z (4 months ago)
- Language: TypeScript
- Homepage:
- Size: 148 KB
- Stars: 14
- Watchers: 3
- Forks: 8
- Open Issues: 0
-
Metadata Files:
- Readme: README-en.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# Redux Balloon
[](https://badge.fury.io/js/redux-balloon)
[](https://travis-ci.org/deepfunc/redux-balloon)
[](https://coveralls.io/github/deepfunc/redux-balloon?branch=master)
[](https://david-dm.org/deepfunc/redux-balloon)
Lightweight front-end business framework based on [redux](https://github.com/reduxjs/redux), [redux-saga](https://github.com/redux-saga/redux-saga), [redux-actions](https://github.com/redux-utilities/redux-actions), [reselect](https://github.com/reduxjs/reselect).(Inspired by redux ducks style and DvaJS)
---
## Features
- **Based on redux community best practices** (redux-saga, redux-actions, reselect, etc.)
- **Model concepts**: organize model with `reducers`, `actions`, `selectors` and `sagas`
- **You can organize Redux State Object as a tree**
- support merging state between parent model and child model
- **Optimize file fragmentation**: one business, one model file
- **Define sagas of model flexibility**
- **Support multiple UI frameworks**: e.g., `React` and `Wechat Mini Program(WePY)`
## Browsers support
Modern browsers and IE9.
| [
](http://godban.github.io/browsers-support-badges/)IE / Edge | [
](http://godban.github.io/browsers-support-badges/)Firefox | [
](http://godban.github.io/browsers-support-badges/)Chrome | [
](http://godban.github.io/browsers-support-badges/)Safari |
| --------- | --------- | --------- | --------- |
| IE9, IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions |
## Getting started
### Install
```bash
$ npm install --save redux-balloon
```
### Usage Example
Suppose we have a UI to fetch user data and display them (use `react` and `react-redux`).
#### `UserList.js`
```react
// ...
import biz from '../biz';
class UserList extends React.Component {
componentDidMount() {
this.initData();
}
initData() {
const { fetchUsers } = this.props;
fetchUsers();
}
render() {
const { users } = this.props;
// display users data ...
}
}
const mapStateToProps = (state) => ({
users: biz.selectors.getUsers(state)
});
const mapDispatchToProps = {
fetchUsers: biz.actions.fetchUsers
};
export default connect(mapStateToProps, mapDispatchToProps)(UserList);
```
What is `biz` ? It is our business code by using `redux-balloon`.
#### `biz.js`
```javascript
import balloon from 'redux-balloon';
import * as types from './types';
import * as api from './api';
const users = {
namespace: 'users',
state: [],
reducers: {
[types.USERS_PUT]: (state, { payload }) => payload
},
actions: () => ({
fetchUsers: types.USERS_GET
}),
selectors: () => ({
getUsers: (state) => state.users
}),
sagas: ({ call, put }) => ({
// saga effects are treated as parameter injection.
*[types.USERS_FETCH]() {
const users = yield call(api.fetchUsers);
yield put({ type: types.USERS_PUT, payload: users });
}
})
};
const biz = balloon();
biz.model(users);
biz.run();
export default biz;
```
To run our app, we'll connect it.
#### `app.js`
```react
// ...
import biz from './biz';
import UserList from './components/UserList';
const App = () => {
return (
);
};
ReactDOM.render(, document.getElementById('app'));
```
You don't need to import redux, redux-saga (and redux-actions, reselect) in your js files; and you don't need initialize redux or redux-saga. By using `redux-balloon`, you can write business codes in easy way and run them in some different UI frameworks. :smile:
## Documentation
[API.md](docs/en/API.md)
## Complete Examples
[React example](examples/react)
WePY example making...
## Change Log
[CHANGELOG.md](CHANGELOG.md)
## Directory
```
├── __tests__ - unit tests
├── examples - how to use it
├── docs - documents
├── src - source codes
└── CHANGELOG.md - change log
```
## License
[MIT](https://tldrlegal.com/license/mit-license)
## Contribution Guide
[CONTRIBUTING.md](CONTRIBUTING.md)