Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

ember-redux

Package Overview
Dependencies
Maintainers
4
Versions
57
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

ember-redux

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

  • 4.0.0
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
310
decreased by-28.9%
Maintainers
4
Weekly downloads
 
Created
Source

Ember Redux

Travis Code Climate Score npm package

Predictable state management for ember apps

Installation

ember redux requires ember-cli v2.4+ and node 6+

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

yarn
ember test

License

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

Licensed under the MIT License

Keywords

FAQs

Package last updated on 09 Jun 2018

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc