glimmer-redux

    1.0.0 • Public • Published

    Glimmer Redux

    Travis npm package

    Predictable state management for glimmer apps

    Installation

    yarn add glimmer-redux
    yarn add rollup-plugin-glimmer-redux
    

    Open the ember-cli-build.js file and add the rollup plugin

    const glimmerRedux = require('rollup-plugin-glimmer-redux');
     
    module.exports = function(defaults) {
      let app = new GlimmerApp(defaults, {
        rollup: {
          plugins: [
            glimmerRedux()
          ]
        }
      });
     
      return app.toTree();
    };

    Open the config/environment.js file and register the reducer type

    Add a reducer directory with an index.ts file

    //src/reducers/index.ts
    import { combineReducers } from 'redux';
     
    const number = (state, action) => {
      // ...reducer code
    };
     
    export default combineReducers({
      number
    });

    Examples

    https://github.com/glimmer-redux/example-basic

    https://github.com/glimmer-redux/example-todomvc

    https://github.com/glimmer-redux/example-reduxsaga

    Usage with glimmer component

    //src/ui/components/HelloWorld/component.ts
    import { connect } from 'glimmer-redux';
    import Component, { tracked } from '@glimmer/component';
     
    class MyComponent extends Component {
      @tracked('up')
      get text() {
        let up = this.up;
        let text = 'Glimmer Redux';
        return `${text} ${up}`;
      }
    }
     
    const stateToComputed = state => ({
      up: state.number.up
    });
     
    const dispatchToActions = dispatch => ({
      update: () => dispatch({type: 'ADD'})
    });
     
    export default connect(stateToComputed, dispatchToActions)(MyComponent);

    Usage without glimmer component

    //src/ui/components/HelloWorld/component.ts
    import { connect } from 'glimmer-redux';
     
    const stateToComputed = state => ({
      up: state.number.up
    });
     
    const dispatchToActions = dispatch => ({
      update: () => dispatch({type: 'ADD'})
    });
     
    export default connect(stateToComputed, dispatchToActions)();

    How do I enable time travel debugging?

    1. Install the redux dev tools extension.

    2. Enjoy!

    Running Tests

    yarn
    ember test
    

    License

    Copyright © 2017 Toran Billups http://toranbillups.com

    Licensed under the MIT License

    Keywords

    none

    Install

    npm i glimmer-redux

    DownloadsWeekly Downloads

    1

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    225 kB

    Total Files

    36

    Last publish

    Collaborators

    • pzuraq
    • toranb