ember-redux / Ember Redux
Licence: mit
Predictable state management for ember apps
Stars: ✭ 281
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Ember Redux
glimmer-hn-pwa
A Demonstration Of HackerNews Progressive Web App Powered By Glimmer.js
Stars: ✭ 28 (-90.04%)
Mutual labels: emberjs
ember-semantic-ui
A variety of semantic-ui components for ember app
Stars: ✭ 20 (-92.88%)
Mutual labels: emberjs
els-component-extraction-addon
Component extraction addon
Stars: ✭ 11 (-96.09%)
Mutual labels: emberjs
wikonnect
Wikonnect seeks to bridge the digital divide through the provision of digital literacy skills. Management support through Asha (www.asha.io).
Stars: ✭ 31 (-88.97%)
Mutual labels: emberjs
Ember Twiddle
JSFiddle type thing for ember-cli style code
Stars: ✭ 269 (-4.27%)
Mutual labels: emberjs
ember-credit-card
"make your credit card form dreamy in one line of code"
Stars: ✭ 89 (-68.33%)
Mutual labels: emberjs
ember-render-helpers
Complimentary render template helpers to the render modifiers
Stars: ✭ 19 (-93.24%)
Mutual labels: emberjs
glimmer-apollo
Ember and Glimmer integration for Apollo Client.
Stars: ✭ 32 (-88.61%)
Mutual labels: emberjs
ember-template-rewrite
A utility for automatically refactoring Ember.js templates.
Stars: ✭ 16 (-94.31%)
Mutual labels: emberjs
ember-changeset-conditional-validations
Conditional validations for ember-changeset-validations
Stars: ✭ 26 (-90.75%)
Mutual labels: emberjs
ember-deep-tracked
Deep auto-tracking for when you just don't care, and want things to work (at the cost of performance in some situtations)
Stars: ✭ 20 (-92.88%)
Mutual labels: emberjs
Ember Apollo Client
🚀 An ember-cli addon for Apollo Client and GraphQL
Stars: ✭ 257 (-8.54%)
Mutual labels: emberjs
ember-gridstack
Ember components to build drag-and-drop multi-column grids powered by gridstack.js
Stars: ✭ 31 (-88.97%)
Mutual labels: emberjs
Ember Redux
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
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?
-
Install the redux dev tools extension.
-
Enjoy!
Running Tests
yarn
ember test
License
Copyright © 2019 Toran Billups https://toranbillups.com
Licensed under the MIT License
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].