Redux action creators

How to use actions in a React/Redux application

So far, in our discussion on how to use Redux as a state management system for React we have looked at the Redux store and the reducers.
There's another component that is essential for this system to work properly: actions.
Actions are just objects with a type and an optional payload. Here's an example:

{
  type: UPDATE_TITLE,
  payload: title
}

Actions are objects created and returned by functions called action creators that live in a directory called actions.
Action creators are connected to a particular component in a way that the component can call them through the props.

After the component calls an action, the action is dispatched (or sent) to the reducer and the reducer makes changes to the application state based on the action.
Let's define an action creator in action/index.js

// src/actions/index.js

export const turnTitleGreen = () => {
  return {
    type: TURN_TITLE_GREEN
  }
}

This action creator is a function that doesn't take any arguments and returns an object with a type property with value assigned to the TURN_TITLE_GREEN variable.
Since we don't have this variable yet, let's define it:

// src/actions/index.js

export const TURN_TITLE_GREEN = 'TURN_TITLE_GREEN';

What's going on here? Why have we defined a variable that’s basically a string?

It turns out that action types are simply strings, and by convention they are all uppercase and words are separated by underscores.

So, why do we need a variable in the first place? Why can't we just use an actual string as the value of the action type and avoid the variable?
The answer to this question has to to with bugs.

We are going to use action type strings in various places in our code. One place is in our reducers, for example. If we misspelled the string in the reducer, we would have created a subtle bug that's difficult to find.
Our reducer would stop working properly, but it would be difficult to find our why. We wouldn't have any warnings or errors to guide us in finding out where the bug is.

Misspelling a variable, though, would prompt Javascript to raise an error and would be easier for us to find our mistake.

Since we have defined this action type variable in the action file, we need to import it in the reducer in order to use it:

// src/reducers/index.js

import { TURN_TITLE_GREEN } from '../actions';

const titleReducer = (state = initialState, action) => {

  switch (action.type) {
    case TURN_TITLE_GREEN: {
      return {
        ...state,
        titleColor: 'green'
      }
    }
    default: return state;
  }
}

When we call this action from our component, the Redux system will dispatch the action to the reducer, so the reducer can do its job of creating the new application state.
But how do we call an action from the component?
We will see how to connect an action to a component and how to call it in the next article.

I write daily about web development. If you like this article, feel free to share it with your friends and colleagues.

You can receive articles like this in your inbox by subscribing to my newsletter.