Skip to content

Connecting the core of the redux system, with an addon extension system for middleware and enhancers

License

MIT, MIT licenses found

Licenses found

MIT
LICENSE
MIT
LICENSE.md
Notifications You must be signed in to change notification settings

lifegadget/ember-redux-core

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

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

Example Container Component

import Ember from 'ember';
import hbs from 'htmlbars-inline-precompile';
import connect from 'ember-redux-core/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);

Running Tests

npm install
bower install
ember test

License

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

Licensed under the MIT License

About

Connecting the core of the redux system, with an addon extension system for middleware and enhancers

Resources

License

MIT, MIT licenses found

Licenses found

MIT
LICENSE
MIT
LICENSE.md

Stars

Watchers

Forks

Packages

No packages published