ember-cli addon that provides simple redux bindings for ember.js
JavaScript HTML CSS
Permalink
Failed to load latest commit information.
addon [FEATURE]: the component instance is now available as `this` for non … Dec 18, 2016
app [REMOVAL]: killed the optional reducer api from 1x Jan 11, 2017
blueprints Optimize lodash Feb 7, 2017
config [BUILD]: upgraded to eslint from jshint Dec 29, 2016
docs [DOCS]: update twiddle in the docs to point at v2.0 and fixed devTool… Feb 7, 2017
tests [REMOVAL]: killed the optional reducer api from 1x Jan 11, 2017
vendor Initial Commit from Ember CLI v1.13.13 Jan 22, 2016
.bowerrc Initial Commit from Ember CLI v1.13.13 Jan 22, 2016
.editorconfig [DEPENDENCY]: upgraded to ember-cli@2.8.0 Sep 23, 2016
.ember-cli Initial Commit from Ember CLI v1.13.13 Jan 22, 2016
.eslintrc.js [BUILD]: upgraded to eslint from jshint Dec 29, 2016
.gitignore Merge pull request #66 from toranb/branches/emberUpgradev210 Dec 15, 2016
.npmignore [BUILD]: updated to ember-cli 2.4.2 Mar 26, 2016
.travis.yml [BUILD]: added ember 2.10 to ember-try/travis Dec 15, 2016
.watchmanconfig Initial Commit from Ember CLI v1.13.13 Jan 22, 2016
CHANGELOG.md [VERSION]: bump version to v2.1.0 Feb 12, 2017
LICENSE [init]: updated the package.json/readme/license Jan 22, 2016
LICENSE.md [BUILD]: updated to ember-cli 2.4.2 Mar 26, 2016
README.md [DOCS]: update twiddle in the docs to point at v2.0 and fixed devTool… Feb 7, 2017
bower.json [DEPENDENCY]: upgraded to ember-cli@2.10 Dec 14, 2016
ember-cli-build.js [BUILD]: upgraded to eslint from jshint Dec 29, 2016
index.js [BUILD]: upgraded to eslint from jshint Dec 29, 2016
package.json [VERSION]: bump version to v2.1.0 Feb 12, 2017
testem.js [BUILD]: upgraded to eslint from jshint Dec 29, 2016

README.md

Ember Redux

Travis Code Climate Score npm package

Description

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

Installation

ember install ember-redux

Documentation

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

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/components/connect';
import ajax from 'example/utilities/ajax';
import getUsersByAccountId from '../reducers';

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

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);

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. Add a folder named enhancers with one file named index.js.

  3. In that file, add the following 3 lines of code:

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

Running Tests

npm install
bower install
ember test

License

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

Licensed under the MIT License