Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/knownasilya/ember-action-services
Action services contain immutable state and actions that mutate that state
https://github.com/knownasilya/ember-action-services
ember-addon emberjs state-management
Last synced: 2 days ago
JSON representation
Action services contain immutable state and actions that mutate that state
- Host: GitHub
- URL: https://github.com/knownasilya/ember-action-services
- Owner: knownasilya
- License: mit
- Created: 2018-05-07T13:13:14.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2018-05-07T14:47:41.000Z (over 6 years ago)
- Last Synced: 2024-09-14T00:24:54.993Z (20 days ago)
- Topics: ember-addon, emberjs, state-management
- Language: JavaScript
- Size: 204 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
ember-action-services
=====================
Action services contain immutable state and actions that mutate that state
💡 If you have ideas for the direction of this addon, please open an issue. I'd love to hear your thoughts!
Installation
------------
```
ember install ember-action-services
```
Usage
-----
Action services let you share actions and state across multiple components and controller/template combos in a safe way.
An action service defines immutable state, which can only be modified by calling `setState` on that service. The developer then creates actions on that service, and modify the state using `setState`. Note that async actions work using `async/await`.
### Setup Action Service
Create a new service using `ember g service `. Then modify the created
file to look something like this:
```js
import { ActionService } from 'ember-action-services';
export default ActionService.extend({
/*
This is optional, but if not set the default state is an empty object.
This could also be the place you bring back state from localStorage or something similar.
*/
initState() {
return {
test: {
name: 'hi'
}
};
},
actions: {
duplicate() {
/*
`pluckState` is provided by ActionService and takes 1 or more keys as arguments, e.g. `this.pluckState('cloneUser', 'test')` will return `{ cloneUser, test }` object.
*/
let { cloneUser } = this.pluckState('cloneUser');
cloneUser = cloneUser ? cloneUser + 1 : 1;
/*
`setState` is also provided by ActionService and takes an object that is merged with the existing state.
*/
this.setState({ cloneUser });
},
setName() {
this.setState({
test: {
name: 'good bye'
}
});
}
}
});
```
Not the use of `ActionService` rather then the default `Ember.Service`.
### Using Action Service
To call actions on an action service, you would first inject
that service where you need it. For example:
```js
import Component from '@ember/component';
import { inject as service } from '@ember/service';
export default Component.extend({
userStateService: service('user-state')
});
```
Then you can use that service in your template:
```hbs
Duplicate User
```
To access state data, you can do so via normal Ember conventions under the `state` path under that service, e.g.
```hbs
User was cloned {{userStateService.state.cloneUser}} times.
```
Contributing
------------
### Installation
* `git clone `
* `cd ember-action-services`
* `npm install`
### Linting
* `npm run lint:js`
* `npm run lint:js -- --fix`
### Running tests
* `ember test` – Runs the test suite on the current Ember version
* `ember test --server` – Runs the test suite in "watch mode"
* `ember try:each` – Runs the test suite against multiple Ember versions
### Running the dummy application
* `ember serve`
* Visit the dummy application at [http://localhost:4200](http://localhost:4200).
For more information on using ember-cli, visit [https://ember-cli.com/](https://ember-cli.com/).
License
-------
This project is licensed under the [MIT License](LICENSE.md).