redux-balloon
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.4 • Public • Published

    English

    Redux Balloon

    npm version Build Status Coverage Status Dependencies Status

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


    特性

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

    兼容性

    支持现代浏览器和 IE9。

    IE / EdgeIE / Edge FirefoxFirefox ChromeChrome SafariSafari
    IE9, IE10, IE11, Edge last 2 versions last 2 versions last 2 versions

    入门指南

    安装

    $ npm install --save redux-balloon

    使用范例

    假设我们要做一个界面获取用户列表数据并且展示出来(使用 reactreact-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 层框架中。😄

    文档

    API.md

    完整示例

    React example

    WePY example 正在制作中...

    更新日志

    CHANGELOG.md

    目录介绍

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

    许可证

    MIT

    贡献者指南

    CONTRIBUTING.md

    Install

    npm i redux-balloon

    DownloadsWeekly Downloads

    3

    Version

    2.0.4

    License

    MIT

    Unpacked Size

    142 kB

    Total Files

    69

    Last publish

    Collaborators

    • deepfunc