01. Simple Action Creator

We started to talk a little about actions in the introduction but what exactly are those "action creators" and how are they linked to "actions"?

It's actually so simple that few lines of code can explain it all!

The action creator is just a function...

var actionCreator = function() {
    // ...that creates an action (yeah the name action creator is pretty obvious now) and returns it
    return {
        type: 'AN_ACTION'
    }
}

So is that all? yes.

However one thing to note is the format of the action. This is kind of a convention in flux that the action is an object that contains a "type" property. This type allow for further handling of the action. Of course, the action can also contain other properties to pass any data you want.

We'll also see later that the action creator can actually return something else than an action, like a function. This will be extremely useful for async action handling (more on that in Dispatch Async Action 1).

We can call this action creator and get an action as expected:

console.log(actionCreator())

Output: { type: 'AN_ACTION' }

Ok, this works but it does not go anywhere... What we need is to have this action to be sent somewhere so that anyone interested could know that something happened and could act accordingly. We call this process "Dispatching an action".

To dispatch an action we need... a dispatch function ("Captain obvious"). And to let anyone interested know that an action happened, we need a mechanism to register subscribers.

So far here is the flow of our application:

ActionCreator -> Action

Read more about actions and action creators here:

http://gaearon.github.io/redux/docs/recipes/ReducingBoilerplate.html

Next: Tutorial 2 Simple Subscriber