# ember-cli-emflux

> Flux library for Ember

Latest version **0.1.3** (published 2015-10-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install ember-cli-emflux
pnpm add ember-cli-emflux
yarn add ember-cli-emflux
bun add ember-cli-emflux
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.3 |
| Published | 2015-10-17 |
| First published | 2015-10-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >= 0.10.0 |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 8 |
| Author | Ilkka Oksanen |
| Maintainers | ilkkao |
| Keywords | flux, architecture, dataflow, action, event, data, ember-addon |

## Links

- npm: https://www.npmjs.com/package/ember-cli-emflux
- Repository: https://github.com/ilkkao/ember-cli-emflux
- Homepage: https://github.com/ilkkao/ember-cli-emflux#readme
- Issues: https://github.com/ilkkao/ember-cli-emflux/issues
- npm.io page: https://npm.io/package/ember-cli-emflux

## Dependencies (1)

- [ember-cli-babel](https://npm.io/package/ember-cli-babel.md) ^5.1.3

## Alternatives

- [async-exit-hook](https://npm.io/package/async-exit-hook.md) — 3.7M weekly downloads
- [evnty](https://npm.io/package/evnty.md) — 7.2K weekly downloads
- [eleventy-plugin-asciidoc](https://npm.io/package/eleventy-plugin-asciidoc.md) — 3.5K weekly downloads
- [@jswork/next-get2get](https://npm.io/package/@jswork/next-get2get.md) — 945 weekly downloads
- [@dashersw/axon](https://npm.io/package/@dashersw/axon.md) — 934 weekly downloads

## Recent versions

- 0.1.3 (latest) — 2015-10-17
- 0.1.2 — 2015-10-16
- 0.1.1 — 2015-10-16
- 0.1.0 — 2015-10-16
- 0.0.4 — 2015-10-15
- 0.0.3 — 2015-10-15
- 0.0.2 — 2015-10-15
- 0.0.1 — 2015-10-15

## README

# Ember-cli-emflux

[Flux](https://facebook.github.io/flux/) library for Ember

[![Build Status](https://secure.travis-ci.org/ilkkao/ember-cli-emflux.png)](http://travis-ci.org/ilkkao/ember-cli-emflux)

## Installation

`npm install --save-dev ember-cli-emflux`

or

`ember install ember-cli-emflux`

## Introduction

pods/components/main/component.js:

```js
import Ember from 'ember';
import { dispatch } from 'emflux/dispatcher';

export default Ember.Component.extend({
  // Get (read) access to all stores
  stores: Ember.inject.service(),

  // Expose posts collection from todos store
  posts: Ember.computed.oneWay('stores.todos.posts'),

  newPost: '',

  actions: {
    newTodoPost() {
      dispatch('CREATE_TODO', { body: this.get('newPost') });
      this.set('newPost', '');
    }
  }
});
```

pods/components/main/template.hbs:

```js
{{#each posts key="id" as |post|}}
    <p>{{post.body}}</p>
{{/each}}

{{input value=newPost action="newTodoTpost"}}

```

stores/todos.js:

```js
import Ember from 'ember';
import Store from 'emflux/store';

export default Store.extend({
  // Posts collection, an array of post models. Stores are singletons,
  // array doesn't need to be initialized in init().
  posts: Ember.A([]),

  handleCreateTodo(params) {
    fetch('/users', {
      method: 'post',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ body: params.body }).then(function(response) {
        if (response.status === 200) {
          // Server accepted the new post. Add it to the collection.
          this.get('posts').push(Ember.Object.create({ body: body}))
        }
      }
    })
  }
});
```

All modules in `/stores` directory are automatically instantiated and registered as store object singletons when the Ember app starts.

`dispatch()` will call matching handler functions from all stores. For example, `ADD_ARTICLE_COMMENT` event is handled by `handleAddArticleEvent` method.

To get the most benefits from flux architecture in Ember app:

- Don't add any logic to Ember controllers.
- Don't set any models in Ember routes. Instead access models through `stores` service that is available for all components. Other objects (including other stores) can access a store using dispatcher `getStore` function.
- Use Ember actions only between child and parent component when no other component or server doesn't need to know about it. In practice you probably need Ember actions rarely.
- Don't mutate store data in components (D'oh!) Only event handlers in stores are allowed to mutate store models.

## Status

This library has been recently extracted from a sizeable Ember app. For the time being, before 1.0.0 release, API should be considered unstable between releases.

## API

### dispatcher:

#### ```dispatch(name, params, acceptCb, rejectCb)```

##### Parameters

```type``` (string, mandatory) Action name, can contain uppercase characters and underscore.

```params``` (hash, optional) Parameter hash that will be given to the action handler in the store.

```acceptCb``` (function, optional) Callback that the action handler can call if it considers the action as accepted.

```rejectedCb``` (function, optional) Callback that the action handler can call if it considers the action as rejected.

##### Return value

none

#### ```getStore(name)```

##### Parameters

```name``` (string, mandatory) Store name.

##### Return value

Store singleton object or `null` if the store doesn't exist.

#### `getAllStores()`

##### Parameters

none

##### Return value

An array containing JavaScript objects with two keys, `name` (string) and `store` (reference to singleton).

## Serialization and snapshotting

*This is an experimental feature.*

If a store implements both `toJSON()` and `fromJSON(object)` methods, emflux will enable snapshotting. `toJSON` method gets then called once in a minute. Object it returns is run through JSON.stringify() and saved to a local storage. Then later when the app is restarted, emflux will fetch the saved local storage snapshot and pass JSON parsed object to `fromJSON()` which then restores the store state. The data you want to persist is defined by the `toJSON()` method, it can be whole or partial store state.

Currently this feature can be used to make the app to start faster.

## Running Tests

* `ember test`
* `ember test --server`

---
_Source: https://npm.io/package/ember-cli-emflux · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._