ember-redux's Introduction

Ember Redux

Description

ember-cli addon that provides simple redux bindings for ember.js

Installation

ember install ember-redux

Documentation

http://www.ember-redux.com/

Demo

https://ember-twiddle.com/7ce3446b14f166f04064eba663c0a350

Example Container Component

import Ember from 'ember';
import hbs from 'htmlbars-inline-precompile';
import connect from 'ember-redux/components/connect';
import ajax from 'example/utilities/ajax';

var stateToComputed = (state) => {
  return {
    users: state.users.all
  };
};

var dispatchToActions = (dispatch) => {
  return {
    remove: (id) => ajax(`/api/users/${id}`, 'DELETE').then(() => dispatch({type: 'REMOVE_USER', id: id}))
  };
};

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

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

Example Presentation Component

import Ember from 'ember';
import hbs from 'htmlbars-inline-precompile';

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

export default UserTableComponent;

Example Composition

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

How do I enable time travel debugging?

1) install the redux chrome dev tools plugin
2) add a folder named enhancers with one file named index.js
3) in that file add 3 lines of code

//app/enhancers/index.js
import redux from 'npm:redux';
var devtools = window.devToolsExtension ? window.devToolsExtension() : f => f;
export default redux.compose(devtools);