English

Redux Balloon

基于 redux, redux-saga, redux-actions, reselect 的轻量级前端框架。(灵感来自于 redux ducks style 和 DvaJS)

特性

• 基于 redux 社区最佳实践组成（redux-saga、redux-actions、reselect）
• Model 概念：通过 reducers, actions, selectors 和 sagas 组织 model
• 可按树形组织 Redux State 对象，支持合并父、子 model 的 state
• 优化业务文件碎片：一个业务，一个单一的模型文件
• 灵活的 sagas 定义方式
• 支持多种 UI 框架：例如 React 和 微信小程序（WePY）

兼容性

支持现代浏览器和 IE9。

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

入门指南

安装

$ npm install --save redux-balloon

使用范例

假设我们要做一个界面获取用户列表数据并且展示出来（使用 react 和 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;
    // 展示用户列表数据 ...
  }
}
  
const mapStateToProps = (state) => ({
  users: biz.selectors.getUsers(state)
});

const mapDispatchToProps = {
  fetchUsers: biz.actions.fetchUsers
};

export default connect(mapStateToProps, mapDispatchToProps)(UserList);

biz 是什么？这就是用 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: ({ call, put }) => ({
    // 通过参数注入 saga effects。
    *[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;

为了让应用跑起来，我们需要配置入口。

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

你不需要 import redux, redux-saga（或者 redux-actions, reselect）到你的 js 文件中；你也不需要手动配置启动 redux 和连接 redux-saga。所以，如果你使用 redux 技术栈， 通过使用 redux-balloon，你可以用一种便捷的方式来编写业务层代码，并应用在多种 UI 层框架中。:smile:

文档

API.md

完整示例

React example

WePY example 正在制作中...

更新日志

CHANGELOG.md

目录介绍

├── __tests__             - 单元测试
├── examples              - 使用示例
├── docs                  - 文档
├── src                   - 源码
└── CHANGELOG.md          - 更新日志

许可证

MIT

贡献者指南

CONTRIBUTING.md