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

A set of Ember Template Helpers for Redux.JS
https://github.com/jkusa/ember-redux-helpers

Last synced: 3 months ago
JSON representation

A set of Ember Template Helpers for Redux.JS

• Host: GitHub
• URL: https://github.com/jkusa/ember-redux-helpers
• Owner: jkusa
• License: mit
• Created: 2016-06-15T03:03:15.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2017-03-27T01:00:14.000Z (almost 8 years ago)
• Last Synced: 2024-10-04T16:40:09.288Z (3 months ago)
• Language: JavaScript
• Homepage: http://jkusa.github.io/ember-redux-helpers/
• Size: 1.02 MB
• Stars: 11
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# ember-redux-helpers

[![Build Status](https://travis-ci.org/jkusa/ember-redux-helpers.svg?branch=master)](https://travis-ci.org/jkusa/ember-redux-helpers)

A set of [Ember](http://emberjs.com) Template Helpers for [Redux.JS](http://redux.js.org)

## Demo Page

 http://jkusa.github.io/ember-redux-helpers/

## Usage

### `{{get-state "state.path"}}`

Helper to fetch and subscribe to state properties in the redux store

```hbs

{!-- component.hbs --}}

{{progress-bar

  progress=(get-state 'progress')

}}

```

Use object paths just like you would with [Ember.get](http://emberjs.com/api/#method_get)

```hbs

{{!-- component.hbs --}}

{{todo-item

  todo=(get-state 'todos.firstObject')

}}

```

### `{{dispatch "TYPE" key=value key=value}}`

Closure action helper to dispatch directly to the redux store

```hs

{{!-- component.hbs --}}

  Click to Add

```

```js

//reducer.js

export default (state=0, action) => {

  if(action.type === 'ADD') {

    state += action.value;

  }

  return state;

};

```

Arguments provided while invoking the action can be referenced via the __invocationArgs__ property array

```hbs

{{!-- component.hbs --}}

```

```js

//reducer.js

export default (state={}, action) => {

  if (action.type === 'UPDATE') {

    let { field, invocationArgs } = action;

    state = Object.assign(state, {

      //invocaionArgs contains the event obj

      [field]: invocationArgs[0].target.value

    });

  }

  return state;

};

```

## Compatibility

This addon will work on Ember versions `1.13.x` and up only, due to use of the new `Helper` implementation.

## Thanks

Thanks to @toranb and @rwjblue who inspired this addon.