ember-redux / ember-redux

Predictable state management for ember apps

Ember Redux

Predictable state management for ember apps

Installation

ember redux requires ember v3.6+ and node >= 8. If you need support for an older version of ember use the v5 release

ember install ember-redux

Documentation and Examples

https://ember-redux.com

Demo

Counter https://ember-twiddle.com/5bee7478e4216abe49f1c0a439bae352

TodoMVC https://ember-twiddle.com/4bb9c326a7e54c739b1f5a5023ccc805

Usage

Container Component

import Component from '@ember/component';
import hbs from 'htmlbars-inline-precompile';
import { connect } from 'ember-redux';
import getUsersByAccountId from '../reducers';
import fetch from 'fetch';

const stateToComputed = (state, attrs) => ({
  users: getUsersByAccountId(state, attrs.accountId)
});

const dispatchToActions = (dispatch) => ({
  remove: (id) => fetch(`/api/users/${id}`, {method: 'DELETE'}).then(fetched => fetched.json()).then(response => dispatch({type: 'REMOVE_USER', id: id}))
});

const UserListComponent = Component.extend({
  layout: hbs`
    {{yield users (action "remove")}}
  `
});

export default connect(stateToComputed, dispatchToActions)(UserListComponent);

Presentation Component

import Component from '@ember/component';
import hbs from 'htmlbars-inline-precompile';

const UserTableComponent = Component.extend({
  layout: hbs`
    {{#each users as |user|}}
      <div>{{user.name}}</div>
      <button onclick={{action remove user.id}}>remove</button>
    {{/each}}
  `
});

export default UserTableComponent;

Composition

{{#user-list accountId=accountId as |users remove|}}
  {{user-table users=users remove=remove}}
{{/user-list}}

Octane Support?

As of version 6 ember-redux now supports both ember component and glimmer component. One brief example of glimmer components and ember redux below.

import Component from '@glimmer/component';
import { action } from '@ember/object';
import { connect } from 'ember-redux';
import getUsersByAccountId from '../reducers';
import fetch from 'fetch';

const stateToComputed = (state, attrs) => ({
  users: getUsersByAccountId(state, attrs.accountId)
});

const dispatchToActions = (dispatch) => ({
  remove: (id) => fetch(`/api/users/${id}`, {method: 'DELETE'}).then(fetched => fetched.json()).then(response => dispatch({type: 'REMOVE_USER', id: id}))
});

class MyClazz extends Component {
  @action
  example() {
    this.actions.remove();
  }
}

export default connect(stateToComputed, dispatchToActions)(MyClazz);

How do I enable time travel debugging?

1. Install the redux dev tools extension.

2. Enjoy!

Running Tests

yarn
ember test

License

Copyright © 2019 Toran Billups https://toranbillups.com

Licensed under the MIT License