Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
64 lines (40 sloc) 4.13 KB

Action Strategies

The article covers actions to an extent, but there's a lot more to consider. As stated before, actions are plain objects. Redux is mostly unopinionated about what types of things should or can go into the action, as long as it has a type attribute and as long as it remains serializable.

Here are some examples of actions from Redux's documentation:

{ type: 'ADD_TODO', text: 'Use Redux' }
{ type: 'REMOVE_TODO', id: 42 }
{ type: 'LOAD_ARTICLE', response: { ... } }

String literals are just one common way to distinguish one type from another. They are not required but this is the more conventional way distinguish action types. It's important that they are globally unique though. Remember, all reducers will receive the action when it's dispatched so there's no way to conduct a dispatch that goes to one particular reducer. Therefore, having an action type called "ADD" is too ambiguous.

To help ensure uniqueness, many developers make "action types" as constants:

const ADD_TODO = 'ADD_TODO';
const REMOVE_TODO = 'REMOVE_TODO';
const LOAD_ARTICLE = 'LOAD_ARTICLE';

store.dispatch({ type: ADD_TODO, text: 'Use Redux' });
store.dispatch({ type: REMOVE_TODO, id: 42 });
store.dispatch({ type: LOAD_ARTICLE, response: { ... } });

ES2015 Alert! Simply having const doesn't mean it's value is ensured to be unique. Using const just means its value can't change. But as a strategy, some devs create one file with all their action type constants inside which helps to see them all in one place, and to visually ensure they are unique.

Some strategies regarding actions seem tedious with lots of boilerplate code. Redux Docs offer a suggestion for reducing boilerplate code. One strategy it offers in addition to using constants is to use "action creators".

Action Creators

Instead of dispatching an object literal directly and repeating the same action object throughout the application, you could call a function that creates and returns the action object:

const ADD_TODO = 'ADD_TODO';

// Action Creator
var addTodo = function(text) {
  return { type: ADD_TODO, text }
}

// Dispatch still sends a plain object
store.dispatch(addTodo('Use Redux'));

This function is called an "action creator". Now you don't have to remember the name of the action type constant. Plus if you needed to change the type constant, this strategy allows us to be more DRY.

Arguably though, this is even more boilerplate since your application is going to potentially have many action type constants and many action creators.

ES2015 Alert! You may have noticed what seems to be a typo in the example. The action object has a text property but no value is being applied. This is not an error. In ES2015, this is called a shorthand property name. Having text all by itself is simultaneously creating a property called text and adding the value of the text variable to it.

Reduce Boilerplate Code with redux-act

If you're not liking all the boilerplate hassle that can go into creating action type constants and action creators, consider using redux-act, a third party tool that abstracts the making of action creators and action types so you don't even have to think about them. Its documentation can speak for itself, but I personally use this tool and I love it.

Flux Standard Action (FSA)

Since the rules around creating actions are so loose, the Flux Standard Action was created to be a set of rules around how to create actions. They are totally optional, but redux-act does require them.

Serializable Actions and State

Actions and state should only contain data which is "serializable", in other words, it converts to JSON well. This isn't a strict rule but it's highly recommended by the Redux docs.

You can’t perform that action at this time.