Never-ending Pumpkin Mulch

    ember-redux
    TypeScript icon, indicating that this package has built-in type declarations

    6.0.0 • Public • Published

    Ember Redux

    Travis Code Climate Score Downloads npm package

    Predictable state management for ember apps

    Installation

    ember redux requires ember v3.6+ and node >= 8. If you need support for an older version of ember use the v5 release

    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 Component from '@ember/component';
    import hbs from 'htmlbars-inline-precompile';
    import { connect } from 'ember-redux';
    import getUsersByAccountId from '../reducers';
    import fetch from 'fetch';
     
    const stateToComputed = (state, attrs) => ({
      users: getUsersByAccountId(state, attrs.accountId)
    });
     
    const dispatchToActions = (dispatch) => ({
      remove: (id) => fetch(`/api/users/${id}`, {method: 'DELETE'}).then(fetched => fetched.json()).then(response => dispatch({type: 'REMOVE_USER', id: id}))
    });
     
    const UserListComponent = Component.extend({
      layout: hbs`
        {{yield users (action "remove")}}
      `
    });
     
    export default connect(stateToComputed, dispatchToActions)(UserListComponent);

    Presentation Component

    import Component from '@ember/component';
    import hbs from 'htmlbars-inline-precompile';
     
    const UserTableComponent = 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}}

    Octane Support?

    As of version 6 ember-redux now supports both ember component and glimmer component. One brief example of glimmer components and ember redux below.

    import Component from '@glimmer/component';
    import { action } from '@ember/object';
    import { connect } from 'ember-redux';
    import getUsersByAccountId from '../reducers';
    import fetch from 'fetch';
     
    const stateToComputed = (state, attrs) => ({
      users: getUsersByAccountId(state, attrs.accountId)
    });
     
    const dispatchToActions = (dispatch) => ({
      remove: (id) => fetch(`/api/users/${id}`, {method: 'DELETE'}).then(fetched => fetched.json()).then(response => dispatch({type: 'REMOVE_USER', id: id}))
    });
     
    class MyClazz extends Component {
      @action
      example() {
        this.actions.remove();
      }
    }
     
    export default connect(stateToComputed, dispatchToActions)(MyClazz);

    How do I enable time travel debugging?

    1. Install the redux dev tools extension.

    2. Enjoy!

    Running Tests

    yarn
    ember test
    

    License

    Copyright © 2019 Toran Billups https://toranbillups.com

    Licensed under the MIT License

    Install

    npm i ember-redux

    DownloadsWeekly Downloads

    542

    Version

    6.0.0

    License

    MIT

    Unpacked Size

    148 kB

    Total Files

    50

    Last publish

    Collaborators

    • ember-redux
    • jkusa
    • toranb