Installation

ember install ember-redux

Documentation and Examples

Demo

Usage

Container Component

importComponentfrom'@ember/component';importhbsfrom'htmlbars-inline-precompile';import{connect}from'ember-redux';importgetUsersByAccountIdfrom'../reducers';importfetchfrom'fetch';conststateToComputed=(state,attrs)=>({users:getUsersByAccountId(state,attrs.accountId)});constdispatchToActions=(dispatch)=>({remove:(id)=>fetch(`/api/users/${id}`,{method:'DELETE'}).then(fetched=>fetched.json()).then(response=>dispatch({type:'REMOVE_USER',id:id}))});constUserListComponent=Component.extend({layout:hbs`    {{yield users (action "remove")}}  `});exportdefaultconnect(stateToComputed,dispatchToActions)(UserListComponent);

Presentation Component

importComponentfrom'@ember/component';importhbsfrom'htmlbars-inline-precompile';constUserTableComponent=Component.extend({layout:hbs`    {{#each users as |user|}}      <div>{{user.name}}</div>      <button onclick={{action remove user.id}}>remove</button>    {{/each}}  `});exportdefaultUserTableComponent;

Composition

{{#user-listaccountId=accountIdas|usersremove|}}{{user-tableusers=usersremove=remove}}{{/user-list}}

Octane Support?

importComponentfrom'@glimmer/component';import{action}from'@ember/object';import{connect}from'ember-redux';importgetUsersByAccountIdfrom'../reducers';importfetchfrom'fetch';conststateToComputed=(state,attrs)=>({users:getUsersByAccountId(state,attrs.accountId)});constdispatchToActions=(dispatch)=>({remove:(id)=>fetch(`/api/users/${id}`,{method:'DELETE'}).then(fetched=>fetched.json()).then(response=>dispatch({type:'REMOVE_USER',id:id}))});classMyClazzextendsComponent{  @actionexample(){this.actions.remove();}}exportdefaultconnect(stateToComputed,dispatchToActions)(MyClazz);

How do I enable time travel debugging?

Running Tests

yarnember test

License