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

  • 2.9.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

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

Keywords

FAQs

Package last updated on 04 Jun 2017

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