Action Creators

» Start by reading the official docs on action creators.

» Here's a helpful article on the "why" of action creators

Because we use FSA-compliant actions, we can now opt-in to several useful libraries, including redux-actions. redux-actions is a pretty simple library that provides a shorthand for building FSA-compliant actions. redux-actions exposes createAction and handleActions

With vanilla Redux, we would create some action constants,

export const UNITS = {
  DELETE_UNIT: "DELETE_UNIT"
}

and then dispatch that action (probably from a container component):

const actionMap = dispatch => {
  deleteUnit: id => dispatch({
    type: UNITS.DELETE_UNIT,
    payload: { id }    
  })
}

With the action creators helpers provided by redux-actions, we eliminate a lot of this boilerplate:

// assuming we've imported { createAction } from 'npm:redux-actions'

export const createAction('deleteUnit')

Or if you like, use the actionMirror util to build and export many action creators at once:

import actionMirror from "vishnu/utils/action-mirror";

export default actionMirror([
  "onUnitUpdated",
  "onUnitSectionUpdated",
  "onMasterCardUpdated",
  …
  "onUnhideUnitSection"
]);

actionMirror will call createAction for every string in the array passed to it. These action creators are essentially like the constants from the first example, but when dispatched, provide POJOs to the redux store that adhere to the FSA convention. An intuition for why this is nice grows as you become more comfortable with it.

These FSA actions may be used from a connected component like so:

const actionMap = dispatch => {
  deleteUnit: id => dispatch(deleteUnit(id))
}

The next section on reducer conventions will show you how to respond to these actions from a reducer.