sententiaregum-flux-container
Version:
The flux implementation of the sententiaregum project based on facebook/flux
104 lines (76 loc) • 3.63 kB
Markdown
# Action creators
## Introduction
Whenever data needs to be changed due to a user interaction in the view for instance, an action will be triggered which
contains this data. Actions itself are a set of data which is published in the system.
As such actions usually communicate with an external API such as a REST API or the localStorage for instance, therefore some helper methods called `creator` are necessary to run this logic
before publishing the action.
## Building a simple action creator
An action creator can define one or multiple actions with a name and associate them with a callback.
These names should be defined in its own module:
``` javascript
// src/constants/post.js
const PUBLISH_POST = 'PUBLISH_POST';
const CREATE_POST = 'CREATE_POST';
export {
PUBLISH_POST,
CREATE_POST
};
```
Now an action creator can be created which defines actions for each of these event names:
``` javascript
// src/actions/postActions.js
import { PUBLISH_POST, CREATE_POST } from '../constants/post';
export default function postActions() {
function publishPost(publish, postId) {
ajax.post('/api/publish-post', { postId })
.then(r => publish(Object.assign({}, r, { postId });
}
function createPost(publish, content) {
ajax.post('/api/create-post', { content })
.then(r => publish(r));
}
return {
[PUBLISH_POST]: publishPost,
[CREATE_POST]: createPost
};
};
```
As you can see, the creator returns an object which associates an event name with a function which contains the logic of the action.
In this example both actions fire an AJAX request to the server and call a function named `publish` when the response was successful.
The function `publish` takes as argument the payload which should be published into the system.
The event name is equal to the action name (e.g. `PUBLISH_POST` or `CREATE_POST`) and will be added automatically by the action creator internally.
## Executing the action
To run one of these actions a simple API has been created:
``` javascript
// src/app.js
import { runAction } from 'sententiaregum-flux-container';
import postActions from './actions/postActions';
import { CREATE_POST } from './constants/post';
runAction(CREATE_POST, postActions, [content]);
```
This function takes three arguments:
- `eventName`: the name of the action to publish.
- `actionCreator`: the action creator itself.
- `args`: An array of arguments that will be given to the action (in the example above you've seen that actions itself can take arguments, too).
## Executing multiple actions in one action
In some cases it might be necessary to execute another action after the current one is dispatched.
This can be done using the `runAction` recursively:
``` javascript
// src/actions/userActions.js
import { runAction } from 'sententiaregum-flux-container';
import { USER_CREATE, USER_INVALID_DATA } from '../constants/user';
export default function userActions() {
function createUser(publish, formData) {
ajax.post('/api/create-user', formData)
.then(r => publish(r))
.catch(r => runAction(USER_INVALID_DATA, userActions, r);
}
function handleUserError(publish, error) {
publish(error);
}
return { USER_CREATE: createUser, USER_INVALID_DATA: handleUserError };
};
```
In this case an error will be caught and published in another action. As the `publish` function dispatches payload for the event associated with
the callback, the `runAction` API itself needs to be used to publish other actions from the current action.
## [Next (Stores)](https://github.com/Sententiaregum/flux-container/blob/master/docs/api/stores.md)