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/

Guides

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

Demo

Counting Example (simple) https://ember-twiddle.com/2d98cd4418b7df5cbce6c5213351d31e

Yelp Clone (complex) https://ember-twiddle.com/6969acc7dda6aef431344cca031dcfcf

Examples

Container Component

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

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

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

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

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

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;

Composition

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

How do I enable time travel debugging?

1. Install the redux dev tools extension.

2. Enjoy!

Running Tests

npm install
ember test

License

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

Licensed under the MIT License