https://github.com/ember-redux/ember-redux

Predictable state management for ember apps
https://github.com/ember-redux/ember-redux

emberjs redux

Last synced: 2 days ago
JSON representation

Predictable state management for ember apps

• Host: GitHub
• URL: https://github.com/ember-redux/ember-redux
• Owner: ember-redux
• License: mit
• Created: 2016-03-26T00:04:28.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2022-12-14T13:43:43.000Z (about 2 years ago)
• Last Synced: 2024-12-13T20:11:22.944Z (10 days ago)
• Topics: emberjs, redux
• Language: JavaScript
• Homepage: https://ember-redux.com/
• Size: 1.21 MB
• Stars: 280
• Watchers: 9
• Forks: 34
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Ember Redux

[![Travis][build-badge]][build] [![Code Climate][climate-badge]][climate] [![Score][score-badge]][score] [![Downloads][downloads-badge]][npm] [![npm package][npm-badge]][npm]

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

```js

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

```js

import Component from '@ember/component';

import hbs from 'htmlbars-inline-precompile';

const UserTableComponent = Component.extend({

  layout: hbs`

    {{#each users as |user|}}

      
{{user.name}}

      remove

    {{/each}}

  `

});


export default UserTableComponent;

```

### Composition

```js

{{#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.

```js

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

[build-badge]: https://travis-ci.org/ember-redux/ember-redux.svg?branch=master

[build]: https://travis-ci.org/ember-redux/ember-redux

[npm-badge]: https://img.shields.io/npm/v/ember-redux.svg?style=flat-square

[npm]: https://www.npmjs.org/package/ember-redux

[climate-badge]: https://codeclimate.com/github/ember-redux/ember-redux/badges/gpa.svg

[climate]: https://codeclimate.com/github/ember-redux/ember-redux

[score-badge]: https://emberobserver.com/badges/ember-redux.svg

[score]: https://emberobserver.com/addons/ember-redux

[downloads-badge]: https://img.shields.io/npm/dm/ember-redux.svg

[redux]: https://github.com/reactjs/redux

[redux dev tools extension]: https://github.com/zalmoxisus/redux-devtools-extension