Predictable state management for ember apps
ember redux requires ember-cli v2.4+ and node 6+
ember install ember-redux
Counter https://ember-twiddle.com/5bee7478e4216abe49f1c0a439bae352
TodoMVC https://ember-twiddle.com/4bb9c326a7e54c739b1f5a5023ccc805
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);
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;
{{#user-list accountId=accountId as |users remove|}}
{{user-table users=users remove=remove}}
{{/user-list}}
-
Install the redux dev tools extension.
-
Enjoy!
yarn
ember test
Copyright © 2019 Toran Billups https://toranbillups.com
Licensed under the MIT License