Glimmer Redux

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