Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
app
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

Ember Redux

Travis Code Climate Score Downloads npm package

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

You can’t perform that action at this time.