Codecademy Logo

Core Concepts in Redux

Introduction To Redux

A React application can share multiple points of data across components. In many cases, managing the data shared can become a complex task.

Redux is a library for managing and updating application states. It provides a centralized “store” for the state that is shared across your entire application, with rules ensuring that the state can only be updated in a predictable fashion using events called “actions”.

Redux works well with applications that have a large amount of global state that is accessed by many of the application’s components. The goal of Redux is to provide scaleable and predictable state management.

Store

In Redux, a store is a container that manages the global state of your application.

As the single source of truth, the store is the center of every Redux application. It has the ability to update the global state and subscribes elements of an application’s UI to changes in the state. Rather than accessing the state directly, Redux provides functions through the store to interact with the state.

Actions

In Redux, an action is a plain JavaScript object that represents an intention to change the store’s state. Action objects must have a type property with a user-defined string value that describes the action being taken.

Optional properties can be added to the action object. One common property added is conventionally called payload, which is used to supply data necessary to perform the desired action.

/*
Basic action object for a shopping list
that removes all items from the list
*/
const clearItems = {
  type: 'shopping/clear'
}


/*
Action object for a shopping list
that adds an item to the list
*/
const addItem = {
  type: 'shopping/addItem',
  payload: 'Chocolate Cake'
}

Reducers

In Redux, a reducer, also known as a reducing function, is a JavaScript function that takes the current state of the store and an action as parameters.

Reducers calculate the new state based on the action it receives. Reducers are the only way the store’s current state can be changed within a Redux application. They are an important part of Redux’s one-way data flow model.

/*
 A reducer function that handles 2 actions
 or returns the current state as a default
*/


const shoppingReducer = (
  state = [],
  action
) => {
  switch (action.type) {
    case "shopping/clear":
      return [];
    case "shopping/addItem":
      return [
        ...state, 
        action.payload];
    default:
      /* 
      If the reducer doesn't care 
      about this action type, return 
      the existing state unchanged
      */
      return state;
  }
}

Immutable Updates

Immutable updates involve creating a new copy of a mutable value, like an array or object, instead of modifying the original. This ensures data integrity and avoids unexpected behaviors.

Some strategies for ensuring immutable updates are:

  • Using the spread operator (...) to create copies of objects and arrays
  • Ensuring that nested objects are copied and not their references
state = ['sleep', 'work', 'relax']
const newState = {...state, 'read'}
/*
newState = ['sleep', 'work', 'relax', 'read']
*/


state = {
  location: 'North Pole',
  temperatures: [-10, -14, -9, -18]
}


const newState = {
  ...state,
  temperatures: [
    ...state.temperatures,
    -22, -17
  ]
}
/*
newState = {
  location: 'North Pole',
  temperatures: [-10, -14, -9, -18, -22, -17]
}
*/

Rules of Reducers

Reducers must follow these three rules:

  1. They should only calculate the new state value based on the state and action arguments
  2. They are not allowed to modify the existing state. Instead, they must make immutable updates, by copying the existing state and making changes to the copied values.
  3. They must not do any asynchronous logic or other “side effects”

These rules help support Redux’s scaleable and predictable state management. Some common behaviors to avoid inside reducers are network requests, generating random numbers, and using asynchronous functions.

One-Way Data Flow

Redux follows a one-way data flow model:

  1. Store: The state of an application at a given time
  2. View: The application’s UI is rendered based on the state
  3. Actions: Input from the application interface causes an action to update the state
  4. Store: The UI is updated based on the new state
Store → View → Actions → Store
Next

Learn more on Codecademy