English | 简体中文

Redux Balloon

Lightweight front-end business framework based on redux, redux-saga, redux-actions, 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
• 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.

IE / Edge	Firefox	Chrome	Safari
IE9, IE10, IE11, Edge	last 2 versions	last 2 versions	last 2 versions

Getting started

Install

$ 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

// ...
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

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: {
    * [types.USERS_FETCH](action, {call, put}) {
      // saga effects are treated as parameter injection.
      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

// ...
import biz from './biz';
import UserList from './components/UserList';

const App = () => {
  return (
    <Provider store={biz.store}>
      <UserList/>
    </Provider>
  );
};

ReactDOM.render(<App/>, 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. 😄

Documentation

API.md

Complete Examples

Making...

Change Log

CHANGELOG.md

Directory

├── __tests__             - unit tests
├── examples              - how to use it
├── docs                  - documents
├── src                   - source codes
└── CHANGELOG.md          - change log

License

MIT

Contribution Guide

CONTRIBUTING.md