We just published a course on the freeCodeCamp.org YouTube channel that will teach you all about Redux and Redux Toolkit. Created by Khaiser Khanam, this comprehensive course takes you from foundational concepts to advanced state management patterns. Whether you're a beginner eager to understand how Redux works or an experienced developer looking to master Redux Toolkit and industry best practices, this course has something for everyone. You'll build real-world applications and learn to avoid common pitfalls while integrating Redux into React projects.

What You’ll Learn in This Course

Part 1: Redux Fundamentals

The course begins with an in-depth exploration of Redux's core concepts, including actions, reducers, and the store. Through clear analogies and visualizations, you’ll learn:

• Why Redux is useful and when it might not be the right choice.

• The three principles of Redux and how they guide state management.

• Middleware, including how to use Thunk for handling async logic.

• Setting up React-Redux and leveraging hooks like useSelector and useDispatch to connect your React components to Redux.

• Building a professional folder structure for your Redux projects.

The first half of the course also dives into practical examples, such as creating a "burger application," combining reducers, implementing logger middleware, and integrating the Redux DevTools extension. By the end of this section, you’ll have a solid foundation to use Redux confidently in your projects.

Part 2: Redux Toolkit Essentials

In the second part, you’ll dive into Redux Toolkit, a modern library that simplifies working with Redux by reducing boilerplate code and improving developer experience. Topics include:

• The createSlice method and its role in simplifying reducer and action creation.

• Advanced patterns like extra reducers and the createAsyncThunk function for handling async actions.

• Setting up projects with Vite, and building features like a pizza-and-burger ordering application.

• Utilizing the Immer library for immutable state updates, and exploring how Redux Toolkit integrates seamlessly with React DevTools.

This section also covers best practices, common beginner mistakes, and Redux Toolkit interview questions to help you prepare for real-world use cases and technical evaluations.

Conclusion

Redux and Redux Toolkit are must-know tools for React developers aiming to build professional-grade applications. This course provides a step-by-step approach, ensuring that even complex topics like middleware, async actions, and advanced state patterns are accessible. Plus, you’ll work on real-world projects, reinforcing the concepts through practical application.

Watch the full course on the freeCodeCamp.org YouTube channel (8-hour watch).

By introducing a unidirectional data flow, Redux brings order and clarity to how data updates and interacts within your React components.

This article discusses the inner workings of Redux, specifically focusing on how data flows throughout your application. We'll explore core concepts like the Redux store, actions, reducers, and selectors, along with practical examples of how they work together to seamlessly manage your application state.

Table of Contents

1. What is Redux?
2. Why Use Redux for Data Management?
3. Core Concepts of Redux Data Flow
4. Unidirectional Data Flow
5. Benefits of Unidirectional Data Flow
6. State Management with Redux Store
7. What is the Redux Store?
8. Store Structure (State, Reducers, Actions)
9. Actions: Initiating State Changes
10. Action Creators (Functions to Create Actions)
11. Action Types (Identifying Different Actions)
12. How to Process State Changes
13. Pure Functions: Reducers at the Core
14. Characteristics of Pure Functions
15. Anatomy of a Reducer Function
16. Parameters: Previous State and Action Object
17. Return Value: Updated State
18. How to Handle Different Actions in Reducers
19. Using Switch Statements or Conditional Logic
20. Dispatching Actions: How to Update the Redux Store
21. The dispatch Function
22. Dispatching Actions from Components or Events
23. How to Access Specific Data from the Store
24. Creating Selector Functions
25. Memoization for Efficient Selector Usage
26. How to Connect React Components to Redux
27. The connect Function from react-redux Library
28. Mapping State and Dispatch to Props
29. Using Connected Components in Your Application
30. Advanced Redux Data Flow Techniques
31. Asynchronous Actions (Redux Thunk, Redux Saga)
32. Middleware for Extending Redux Functionality
33. Best Practices for Managing Data Flow in Redux
34. Conclusion

What is Redux?

Redux is a predictable state container for JavaScript applications, primarily used with libraries like React. It helps manage the application state in a centralized store, making it easier to manage and update state across your entire application.

In simple terms, Redux provides a way to store and manage the data that your application needs to work. It follows a strict pattern to ensure that state changes are predictable and manageable.

Why Use Redux for Data Management?

Using Redux for data management in your application offers several advantages:

Centralized State Management: Redux stores the application's state in a single store, making it easier to manage and debug compared to having scattered state across multiple components.

Predictable State Changes: State mutations are done through reducers, which are pure functions. This ensures that state changes are predictable and traceable, making it easier to understand how data flows through your application.

Easier Debugging: With a single source of truth, debugging becomes simpler. You can log state changes, track actions, and even implement time-travel debugging (via Redux DevTools) to replay actions and inspect state at any point in time.

Facilitates Testing: Since reducers are pure functions that depend only on their input and produce predictable output, testing becomes straightforward. You can easily test how reducers update the state in response to different actions.

Enforces Unidirectional Data Flow: Redux follows a strict unidirectional data flow pattern. Data flows in one direction: actions are dispatched, reducers update the state immutably, and components subscribe to the changes they're interested in. This pattern simplifies data management and reduces bugs related to inconsistent state.

Eases State Persistence: Redux makes it easier to persist your application state across sessions or store it locally, enhancing the user experience by preserving data between visits.

Scalability: Redux scales well with large applications because of its centralized state management. As your application grows, managing state becomes more manageable and less error-prone compared to using local component state or prop drilling.

Core Concepts of Redux Data Flow

Understanding the core concepts of Redux data flow is essential for mastering state management in modern JavaScript applications.

Unidirectional Data Flow

Redux follows a strict unidirectional data flow pattern, which means that data in your application moves in a single direction through a series of steps:

1. Actions: Actions are plain JavaScript objects that represent an intention to change the state. They are the only source of information for the store.
2. Reducers: Reducers are pure functions responsible for handling state transitions based on actions. They specify how the application's state changes in response to actions sent to the store.
3. Store: The store holds the application state. It allows access to the state via getState(), updates the state via dispatch(action), and registers listeners via subscribe(listener).
4. View: React components (or any other UI layer) subscribe to the store to receive updates when the state changes. They then re-render based on the updated state.

Here’s a simplified overview of how the unidirectional data flow works in Redux:

1. Action Dispatch: Components dispatch actions to the Redux store using store.dispatch(action). Actions are plain JavaScript objects with a type field that describes the type of action being performed.
2. Action Handling: The store passes the dispatched action to the root reducer. The reducer is a pure function that takes the current state and the action, computes the new state based on the action, and returns the updated state.
3. State Update: The Redux store updates its state based on the return value of the root reducer. It notifies all subscribed components of the state change.
4. Component Re-render: Components that are subscribed to the store receive the updated state as props. They re-render with the new data.

Benefits of Unidirectional Data Flow

Predictability: By enforcing a single direction for data flow, Redux makes state changes more predictable and easier to understand. Actions are explicit about what changes are happening, and reducers clearly define how the state transitions occur.

Debugging: Unidirectional data flow simplifies debugging because you can trace how state changes propagate through your application. Redux DevTools enhance this further by allowing you to track actions, inspect state changes over time, and even replay actions to reproduce bugs.

Maintainability: With a clear separation between data (state) and logic (reducers), Redux promotes cleaner, more maintainable code. It reduces the likelihood of bugs caused by inconsistent state mutations or side effects.

Scalability: As your application grows in size and complexity, unidirectional data flow helps manage state updates more effectively. It avoids the pitfalls of two-way data binding and ensures that changes to the state are controlled and manageable.

Testing: Since reducers are pure functions that take inputs and produce outputs without side effects, unit testing becomes straightforward. You can test reducers with different actions and state scenarios to ensure they behave as expected.

State Management with Redux Store

State management plays a pivotal role in modern web development, ensuring applications maintain consistent and predictable states across various components.

What is the Redux Store?

The Redux Store is the heart of Redux state management. It holds the entire state tree of your application. The store allows you to:

• Access the current state of your application via store.getState().
• Dispatch actions to change the state using store.dispatch(action).
• Subscribe to changes in the state so your components can update accordingly using store.subscribe(listener).

In essence, the Redux Store acts as a centralized repository for the state of your application, facilitating predictable data flow and making state management more manageable.

Store Structure (State, Reducers, Actions)

The state in Redux represents the entire state of your application. It is typically structured as a plain JavaScript object. The shape of the state is defined by the reducers. For example:

const initialState = {
  todos: [],
  visibilityFilter: 'SHOW_ALL',
};

In this example, todos and visibilityFilter are pieces of state managed by Redux.

Reducers are functions that specify how the application's state changes in response to actions dispatched to the store. They take the current state and an action as arguments, and return the new state based on the action type.

Reducers must be pure functions, meaning they produce the same output for the same input and do not modify the state directly.

const todosReducer = (state = [], action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return [
        ...state,
        {
          id: action.id,
          text: action.text,
          completed: false
        }
      ];
    case 'TOGGLE_TODO':
      return state.map(todo =>
        (todo.id === action.id)
          ? { ...todo, completed: !todo.completed }
          : todo
      );
    default:
      return state;
  }
};

In this example, todosReducer manages the todos piece of state, handling actions like 'ADD_TODO' and 'TOGGLE_TODO' to add new todos or toggle their completion status.

Actions are plain JavaScript objects that describe what happened in your application. They are the only source of information for the store. Actions typically have a type field that indicates the type of action being performed, and they may also carry additional data necessary for the action.

const addTodo = (text) => ({
  type: 'ADD_TODO',
  id: nextTodoId++,
  text
});

const toggleTodo = (id) => ({
  type: 'TOGGLE_TODO',
  id
});

In this example, addTodo and toggleTodo are action creator functions that return actions to add a new todo and toggle the completion status of a todo, respectively.

The relationship between these elements in Redux is crucial for managing application state effectively:

• Actions describe events that occur in your application.
• Reducers specify how the application's state changes in response to actions.
• Store holds the application state and allows you to dispatch actions to update the state.

Together, these components form the core structure of Redux state management, providing a clear and predictable way to manage and update application state across your entire application.

Actions: Initiating State Changes

Managing state effectively lies at the core of creating dynamic and responsive applications. Actions, within the Redux architecture and similar state management libraries, serve as important elements for initiating state changes.

Action Creators (Functions to Create Actions)

Action creators in Redux are functions that create and return action objects. These action objects describe what happened in your application and are dispatched to the Redux store to initiate state changes.

Action creators encapsulate the logic of creating actions, making your code more modular and easier to test.

Here's an example of an action creator:

// Action creator function
const addTodo = (text) => ({
  type: 'ADD_TODO',
  id: nextTodoId++,
  text
});

// Usage of the action creator
const newTodoAction = addTodo('Buy groceries');

In this example:

• addTodo is an action creator function that takes text as a parameter and returns an action object.
• The action object has a type field ('ADD_TODO') that identifies the type of action and additional fields (id and text) that provide necessary data for the action.

Action creators simplify the process of creating actions, especially when actions require complex data or calculations before dispatching.

Action Types (Identifying Different Actions)

Action types in Redux are string constants that define the type of action being performed. They are used to identify and differentiate different actions that can be dispatched to the Redux store. By using string constants for action types, Redux ensures that action types are unique and easy to reference throughout your application.

Here's how action types are typically defined:

// Action types as constants
const ADD_TODO = 'ADD_TODO';
const TOGGLE_TODO = 'TOGGLE_TODO';
const SET_VISIBILITY_FILTER = 'SET_VISIBILITY_FILTER';

These constants (ADD_TODO, TOGGLE_TODO, SET_VISIBILITY_FILTER) represent different actions that can occur in your application, such as adding a todo, toggling the completion status of a todo, or setting a visibility filter for todos.

Action types are typically used in action objects created by action creators and are matched in reducers to determine how the state should change in response to each action.

// Example of using action types in a reducer
const todosReducer = (state = [], action) => {
  switch (action.type) {
    case ADD_TODO:
      return [
        ...state,
        {
          id: action.id,
          text: action.text,
          completed: false
        }
      ];
    case TOGGLE_TODO:
      return state.map(todo =>
        (todo.id === action.id)
          ? { ...todo, completed: !todo.completed }
          : todo
      );
    default:
      return state;
  }
};

In this example:

• ADD_TODO and TOGGLE_TODO are action types used in the todosReducer to handle different types of actions ('ADD_TODO' and 'TOGGLE_TODO').
• The action.type field in the switch statement ensures that the reducer responds appropriately to each dispatched action based on its type.

How to Process State Changes

At the heart of state management are reducers, pure functions designed to handle state transitions in a controlled and immutable manner.

Pure Functions: Reducers at the Core

Reducers in Redux are pure functions responsible for specifying how the application's state changes in response to actions dispatched to the store. They take the current state and an action as arguments, and return the new state based on the action type.

Here’s a breakdown of how reducers work and their role in managing state changes:

Pure Functions: Reducers are pure functions, which means they:

• Produce the same output for the same input every time they are called.
• Do not cause any side effects (such as modifying arguments or global variables).
• Do not mutate the state directly, but instead return a new state object.

Handling State Transitions: Reducers specify how the application's state changes in response to different types of actions. They use the current state and the action dispatched to compute and return the new state.

// Example of a todos reducer
const todosReducer = (state = [], action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return [
        ...state,
        {
          id: action.id,
          text: action.text,
          completed: false
        }
      ];
    case 'TOGGLE_TODO':
      return state.map(todo =>
        (todo.id === action.id)
          ? { ...todo, completed: !todo.completed }
          : todo
      );
    default:
      return state;
  }
};

In this example:

• todosReducer is a pure function that takes state (current todos array) and action as arguments.
• Depending on the action.type, it computes and returns a new state (updated todos array).

Immutable State Updates: Reducers should never mutate the state directly. Instead, they create copies of the state and modify the copies to produce a new state object. This ensures that Redux can detect state changes and update components efficiently.

Single Responsibility Principle: Each reducer typically handles updates to a specific slice of the application state. This helps maintain a clear separation of concerns and makes reducers easier to understand, test, and maintain.

Characteristics of Pure Functions

Pure functions, including Redux reducers, have specific characteristics that make them well-suited for managing state changes:

Deterministic: A pure function always produces the same output for the same input. This predictability ensures that reducers behave consistently and are easier to reason about.

No Side Effects: Pure functions do not modify the input arguments or any external state. They only depend on their input parameters and produce an output without causing observable side effects.

Immutable Data: Pure functions do not mutate data. Instead, they create and return new data structures. In Redux, reducers produce a new state object without modifying the existing state, enabling efficient change detection and state management.

Referential Transparency: Pure functions can be replaced with their return values without affecting the correctness of the program. This property supports composability and makes it easier to test and reason about code.

Anatomy of a Reducer Function

A reducer function, at its core, defines how application state changes in response to dispatched actions. This function takes two parameters: the current state and an action object, determining the new state based on the type of action received.

Parameters: Previous State and Action Object

A reducer function in Redux is a pure function that takes two parameters: the previous state (state before the action is applied) and an action object. These parameters define how the reducer computes the next state of the application.

Previous State: This parameter represents the current state of the application before the action is dispatched. It is immutable and should not be modified directly within the reducer.

Action Object: An action object is a plain JavaScript object that describes what happened in your application. It typically has a type field that indicates the type of action being performed. Other fields in the action object may provide additional data necessary to update the state.

const action = {
  type: 'ADD_TODO',
  id: 1,
  text: 'Buy groceries'
};

In this example, action.type is 'ADD_TODO', indicating that we want to add a new todo item to the state.

Return Value: Updated State

The reducer function must return the updated state based on the previous state and the action object passed to it. The updated state is typically a new object that represents the application's state after applying the action.

Here’s the basic structure of a reducer function:

const initialState = {
  todos: [],
  visibilityFilter: 'SHOW_ALL'
};

const todoAppReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return {
        ...state,
        todos: [
          ...state.todos,
          {
            id: action.id,
            text: action.text,
            completed: false
          }
        ]
      };
    case 'TOGGLE_TODO':
      return {
        ...state,
        todos: state.todos.map(todo =>
          (todo.id === action.id)
            ? { ...todo, completed: !todo.completed }
            : todo
        )
      };
    case 'SET_VISIBILITY_FILTER':
      return {
        ...state,
        visibilityFilter: action.filter
      };
    default:
      return state;
  }
};

In this example:

• todoAppReducer is a reducer function that manages the state of todos and visibility filters.
• It takes state (previous state) and action as parameters.
• Depending on the action.type, it computes and returns a new state object that reflects the changes caused by the action.

Key Points:

Immutable Update: Reducers should never modify the previous state directly. Instead, they create a new state object by copying the previous state (...state) and applying changes to it.

Default Case: The default case in the switch statement returns the current state unchanged if the reducer doesn’t recognize the action type. This ensures that the reducer always returns a valid state object, even if no changes are made.

Single Responsibility: Each case in the switch statement corresponds to a specific action type and is responsible for updating a specific slice of the application state. This promotes a clear separation of concerns and makes reducers easier to understand and maintain.

How to Handle Different Actions in Reducers

In Redux, you can handle different actions in reducers using either switch statements or conditional logic. Both approaches aim to determine how the application state should change based on the type of action dispatched.

Using Switch Statements

Switch statements are commonly used in Redux reducers to handle different action types. Each case in the switch statement corresponds to a specific action type, and the reducer executes the corresponding logic based on the action type.

Here's an example of using switch statements in a reducer:

const initialState = {
  todos: [],
  visibilityFilter: 'SHOW_ALL'
};

const todoAppReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return {
        ...state,
        todos: [
          ...state.todos,
          {
            id: action.id,
            text: action.text,
            completed: false
          }
        ]
      };
    case 'TOGGLE_TODO':
      return {
        ...state,
        todos: state.todos.map(todo =>
          (todo.id === action.id)
            ? { ...todo, completed: !todo.completed }
            : todo
        )
      };
    case 'SET_VISIBILITY_FILTER':
      return {
        ...state,
        visibilityFilter: action.filter
      };
    default:
      return state;
  }
};

In this example:

• The todoAppReducer function uses a switch statement to handle different action types ('ADD_TODO', 'TOGGLE_TODO', 'SET_VISIBILITY_FILTER').
• Each case block specifies how the state should be updated in response to the corresponding action type.
• The default case returns the current state unchanged if the reducer doesn’t recognize the action type, ensuring that the reducer always returns a valid state object.

Using Conditional Logic

Alternatively, reducers can also use conditional logic (if-else statements) to determine how to update the state based on the action type. While less common than switch statements in Redux, conditional logic can be used similarly to handle actions.

Here's an example of using conditional logic in a reducer:

const todoAppReducer = (state = initialState, action) => {
  if (action.type === 'ADD_TODO') {
    return {
      ...state,
      todos: [
        ...state.todos,
        {
          id: action.id,
          text: action.text,
          completed: false
        }
      ]
    };
  } else if (action.type === 'TOGGLE_TODO') {
    return {
      ...state,
      todos: state.todos.map(todo =>
        (todo.id === action.id)
          ? { ...todo, completed: !todo.completed }
          : todo
      )
    };
  } else if (action.type === 'SET_VISIBILITY_FILTER') {
    return {
      ...state,
      visibilityFilter: action.filter
    };
  } else {
    return state;
  }
};

In this example:

• The todoAppReducer function uses if-else statements to check the action type (action.type) and execute different logic based on the type of action.
• Each condition specifies how the state should be updated for the corresponding action type.
• The final else block returns the current state unchanged if the action type is not recognized.

Choosing Between Switch Statements and Conditional Logic

1. Switch Statements:

• Advantages: Switch statements are typically more readable and maintainable when handling multiple action types in Redux reducers. They clearly separate different cases based on action types.
• Considerations: Ensure each action type has a corresponding case in the switch statement to handle updates correctly.

2. Conditional Logic:

• Advantages: Conditional logic (if-else statements) provides flexibility and can be easier to understand in certain scenarios where there are fewer action types.
• Considerations: Maintain consistency in handling action types and ensure each condition handles state updates correctly.

In practice, switch statements are the recommended approach in Redux reducers due to their clarity and convention within the Redux community. They help maintain a structured approach to managing state changes based on different action types, promoting consistency and predictability in Redux applications.

Dispatching Actions: How to Update the Redux Store

Dispatching actions in Redux is fundamental to managing state updates within your application. Redux, a predictable state container for JavaScript applications, relies on actions as payloads of information that send data from your application to the Redux store.

The dispatch function

In Redux, the dispatch function is a method provided by the Redux store. It is used to dispatch actions to trigger state changes in the application. When an action is dispatched, the Redux store calls the reducer function associated with it, computes the new state, and notifies all subscribers that the state has been updated.

Here's how you use the dispatch function:

import { createStore } from 'redux';

// Reducer function
const counterReducer = (state = { count: 0 }, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
};

// Create Redux store
const store = createStore(counterReducer);

// Dispatch actions to update state
store.dispatch({ type: 'INCREMENT' });
store.dispatch({ type: 'DECREMENT' });

In this example:

• We create a Redux store using createStore and pass in the counterReducer function.
• The store.dispatch function is used to dispatch actions ({ type: 'INCREMENT' } and { type: 'DECREMENT' }) to update the state.
• Each dispatched action triggers the corresponding case in the reducer, updating the state as defined.

Dispatching Actions from Components or Events

In a typical Redux application, actions are often dispatched from React components in response to user interactions or other events.

To dispatch actions from components, you typically connect the component to the Redux store using React Redux's connect function or hooks like useDispatch.

Here's how you can dispatch actions from a React component using connect and mapDispatchToProps:

import React from 'react';
import { connect } from 'react-redux';

// Action creator functions
const increment = () => ({ type: 'INCREMENT' });
const decrement = () => ({ type: 'DECREMENT' });

// Component definition
const Counter = ({ count, increment, decrement }) => (
  <div>
    <p>Count: {count}</p>
    <button onClick={increment}>Increment</button>
    <button onClick={decrement}>Decrement</button>
  </div>
);

// Map state to props
const mapStateToProps = (state) => ({
  count: state.count
});

// Map dispatch to props
const mapDispatchToProps = {
  increment,
  decrement
};

// Connect component to Redux store
export default connect(mapStateToProps, mapDispatchToProps)(Counter);

In this example:

• increment and decrement are action creator functions that return actions ({ type: 'INCREMENT' } and { type: 'DECREMENT' }).
• The Counter component is connected to the Redux store using connect. It receives count from the Redux state as a prop, along with increment and decrement action creators.
• Clicking the "Increment" and "Decrement" buttons dispatches actions, which are handled by the reducer to update the Redux state.

Alternatively, you can use React Redux hooks (useDispatch) for dispatching actions in functional components:

import React from 'react';
import { useDispatch, useSelector } from 'react-redux';

const Counter = () => {
  const count = useSelector(state => state.count);
  const dispatch = useDispatch();

  const handleIncrement = () => {
    dispatch({ type: 'INCREMENT' });
  };

  const handleDecrement = () => {
    dispatch({ type: 'DECREMENT' });
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleIncrement}>Increment</button>
      <button onClick={handleDecrement}>Decrement</button>
    </div>
  );
};

export default Counter;

In this functional component example:

• useSelector is used to select count from the Redux store state.
• useDispatch is used to get the dispatch function from the Redux store.
• handleIncrement and handleDecrement functions dispatch actions ({ type: 'INCREMENT' } and { type: 'DECREMENT' }) to update the Redux state when the buttons are clicked.

How to Access Specific Data from the Store

Accessing specific data from the store in Redux involves navigating through the application's state structure to retrieve precise information needed for rendering components or performing logic.

Creating Selector Functions

Selectors in Redux are functions that encapsulate the logic for retrieving specific pieces of data from the Redux store state. They help to decouple the components from the structure of the state and facilitate efficient data access and transformation.

Here’s how you can create selector functions:

// Example Redux state
const initialState = {
  todos: [
    { id: 1, text: 'Learn Redux', completed: false },
    { id: 2, text: 'Write Redux selectors', completed: true },
    // more todos...
  ],
  visibilityFilter: 'SHOW_COMPLETED'
};

// Selector function to get todos from state
const getTodos = (state) => state.todos;

// Selector function to filter todos based on visibility filter
const getVisibleTodos = (state) => {
  const todos = getTodos(state);
  const visibilityFilter = state.visibilityFilter;

  switch (visibilityFilter) {
    case 'SHOW_COMPLETED':
      return todos.filter(todo => todo.completed);
    case 'SHOW_ACTIVE':
      return todos.filter(todo => !todo.completed);
    case 'SHOW_ALL':
    default:
      return todos;
  }
};

In this example:

• getTodos is a selector function that retrieves the todos array from the Redux state.
• getVisibleTodos is a selector function that filters todos based on the visibilityFilter stored in the state.

Selectors can also be composed to create more complex selectors:

// Composed selector function to get visible todos
const getVisibleTodos = (state) => {
  const todos = getTodos(state);
  const visibilityFilter = state.visibilityFilter;

  switch (visibilityFilter) {
    case 'SHOW_COMPLETED':
      return getCompletedTodos(todos);
    case 'SHOW_ACTIVE':
      return getActiveTodos(todos);
    case 'SHOW_ALL':
    default:
      return todos;
  }
};

// Helper functions for filtering todos
const getCompletedTodos = (todos) => todos.filter(todo => todo.completed);
const getActiveTodos = (todos) => todos.filter(todo => !todo.completed);

Memoization for Efficient Selector Usage

Memoization is a technique used to optimize expensive computations by caching the results of function calls based on their input. In the context of Redux selectors, memoization can improve performance by ensuring that selectors only recalculate their results when their input (state) changes.

You can use libraries like reselect for memoization in Redux selectors:

npm install reselect

Example usage of reselect for memoization:

import { createSelector } from 'reselect';

// Selectors
const getTodos = (state) => state.todos;
const getVisibilityFilter = (state) => state.visibilityFilter;

// Memoized selector to get visible todos
const getVisibleTodos = createSelector(
  [getTodos, getVisibilityFilter],
  (todos, visibilityFilter) => {
    switch (visibilityFilter) {
      case 'SHOW_COMPLETED':
        return todos.filter(todo => todo.completed);
      case 'SHOW_ACTIVE':
        return todos.filter(todo => !todo.completed);
      case 'SHOW_ALL':
      default:
        return todos;
    }
  }
);

In this example:

• createSelector from reselect creates a memoized selector that takes getTodos and getVisibilityFilter as input selectors.
• The selector function computes the filtered todos based on the visibilityFilter and caches the result until the input selectors change.

How to Connect React Components to Redux

Connecting React components to Redux is a fundamental technique for managing application state efficiently within React-based projects. Redux serves as a centralized store that holds the entire state of your application, making it accessible to any component that needs it.

The connect Function from react-redux Library

In React applications using Redux for state management, the connect function from the react-redux library is used to connect React components to the Redux store. It provides a way to inject Redux state and action dispatching functions (dispatchers) into your components.

Here’s how you use connect:

import React from 'react';
import { connect } from 'react-redux';

// Define a React component
const Counter = ({ count, increment, decrement }) => (
  <div>
    <p>Count: {count}</p>
    <button onClick={increment}>Increment</button>
    <button onClick={decrement}>Decrement</button>
  </div>
);

// Map Redux state to component props
const mapStateToProps = (state) => ({
  count: state.count
});

// Map dispatching actions to component props
const mapDispatchToProps = {
  increment: () => ({ type: 'INCREMENT' }),
  decrement: () => ({ type: 'DECREMENT' })
};

// Connect component to Redux store
export default connect(mapStateToProps, mapDispatchToProps)(Counter);

Mapping State and Dispatch to Props

mapStateToProps: This function maps the Redux store's state to the props of your React component. It takes the Redux state as an argument and returns an object. Each field in the returned object will become a prop for the connected component.

mapDispatchToProps: This function maps dispatching actions to props of your React component. It can be an object where each field is an action creator function, or a function that receives dispatch as an argument and returns an object. Each action creator will be wrapped automatically with dispatch so they can be called directly.

In the example:

• mapStateToProps maps the count field from the Redux state (state.count) to the count prop of the Counter component.
• mapDispatchToProps maps the increment and decrement actions to props, so clicking the buttons in the Counter component will dispatch the corresponding actions ({ type: 'INCREMENT' } and { type: 'DECREMENT' }).

Using Connected Components in Your Application

Once a component is connected to the Redux store using connect, it can access Redux state and dispatch actions via props. Here’s how you can use connected components in your application:

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import rootReducer from './reducers'; // Import your root reducer
import App from './App'; // Import your connected component

// Create Redux store with root reducer
const store = createStore(rootReducer);

// Render the App component inside the Provider
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

In this setup:

• Provider is a component from react-redux that makes the Redux store available to any nested components that have been connected using connect.
• store is created using createStore and combined with a root reducer (rootReducer) that combines all your reducers into one.

By wrapping your top-level component (App in this case) with Provider and passing the Redux store as a prop, all connected components within your application can access the Redux store and interact with it through props (mapStateToProps and mapDispatchToProps mappings).

Advanced Redux Data Flow Techniques

Advanced Redux data flow techniques expand upon the fundamental principles of managing state in complex applications. These techniques go beyond basic actions and reducers, introducing concepts such as middleware, selectors, and asynchronous actions.

Asynchronous Actions (Redux Thunk, Redux Saga)

In Redux, handling asynchronous actions involves managing actions that have side effects, such as fetching data from a server or updating state asynchronously. Redux provides several middleware solutions to handle asynchronous actions effectively.

Redux Thunk

Redux Thunk is a middleware that allows you to write action creators that return a function instead of an action object. This function can then perform asynchronous operations and dispatch regular synchronous actions when the asynchronous operations complete.

Example of using Redux Thunk for asynchronous actions:

Setting up Redux Thunk Middleware:

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers'; // Import your root reducer

// Create Redux store with thunk middleware
const store = createStore(rootReducer, applyMiddleware(thunk));

Async Action Creator using Redux Thunk:

// Action creator function using Redux Thunk
const fetchPosts = () => {
  return async (dispatch) => {
    dispatch({ type: 'FETCH_POSTS_REQUEST' });

    try {
      const response = await fetch('https://jsonplaceholder.typicode.com/posts');
      const posts = await response.json();
      dispatch({ type: 'FETCH_POSTS_SUCCESS', payload: posts });
    } catch (error) {
      dispatch({ type: 'FETCH_POSTS_FAILURE', error: error.message });
    }
  };
};

In this example:

• fetchPosts is an action creator that returns a function instead of an action object.
• Inside the function, you can perform asynchronous operations (like fetching data) and dispatch actions based on the result.
• Redux Thunk middleware intercepts functions returned by action creators, enabling asynchronous actions in Redux.

Redux Saga

Redux Saga is another middleware for handling side effects in Redux applications. It uses ES6 generators to make asynchronous code easier to read, write, and test.

Example of using Redux Saga for handling asynchronous actions:

Setting up Redux Saga Middleware:

import { createStore, applyMiddleware } from 'redux';
import createSagaMiddleware from 'redux-saga';
import rootReducer from './reducers'; // Import your root reducer
import rootSaga from './sagas'; // Import your root saga

// Create Redux Saga middleware
const sagaMiddleware = createSagaMiddleware();

// Create Redux store with Saga middleware
const store = createStore(rootReducer, applyMiddleware(sagaMiddleware));

// Run the root saga
sagaMiddleware.run(rootSaga);

Example Saga (rootSaga.js):

import { all, call, put, takeEvery } from 'redux-saga/effects';
import { fetchPostsSuccess, fetchPostsFailure } from './actions'; // Import your action creators

// Worker saga for fetching posts
function* fetchPostsSaga() {
  try {
    const response = yield call(fetch, 'https://jsonplaceholder.typicode.com/posts');
    const posts = yield call([response, 'json']);
    yield put(fetchPostsSuccess(posts));
  } catch (error) {
    yield put(fetchPostsFailure(error.message));
  }
}

// Watcher saga to listen for FETCH_POSTS_REQUEST action
function* watchFetchPosts() {
  yield takeEvery('FETCH_POSTS_REQUEST', fetchPostsSaga);
}

// Root saga
export default function* rootSaga() {
  yield all([
    watchFetchPosts()
    // Add more watchers if needed
  ]);
}

In this example:

• fetchPostsSaga is a worker saga that performs the asynchronous operation (fetching posts).
• watchFetchPosts is a watcher saga that listens for specific actions (FETCH_POSTS_REQUEST) and triggers the corresponding worker saga.
• rootSaga combines multiple sagas using all and runs them using sagaMiddleware.run.

Middleware for Extending Redux Functionality

Middleware in Redux provides a way to extend the Redux store's capabilities, such as logging actions, handling asynchronous operations, routing, and more. Middleware sits between dispatching an action and the moment it reaches the reducer, allowing interception and manipulation of actions.

Example of Custom Middleware:

const loggerMiddleware = store => next => action => {
  console.log('Dispatching action:', action);
  const result = next(action);
  console.log('New state:', store.getState());
  return result;
};

// Applying custom middleware to Redux store
import { createStore, applyMiddleware } from 'redux';
import rootReducer from './reducers'; // Import your root reducer

// Create Redux store with custom middleware
const store = createStore(rootReducer, applyMiddleware(loggerMiddleware));

In this example:

• loggerMiddleware is a custom middleware function that logs each dispatched action and the resulting state.
• next is a function provided by Redux that allows the action to continue to the next middleware or the reducer.
• Custom middleware enhances Redux functionality by intercepting actions, performing custom logic, and optionally dispatching new actions or modifying existing ones.

Best Practices for Managing Data Flow in Redux

Redux provides a structured way to manage state in JavaScript applications, but effective usage requires adhering to best practices. Here are my key recommendations for managing data flow in Redux:

Organizing Reducers and Actions

File Structure and Organization:

• Separate concerns: Keep actions, reducers, and selectors in separate files to maintain clarity and modularity.
• Feature-based structure: Group related actions and reducers together based on features rather than types.

src/
├── actions/
│   ├── todosActions.js
│   └── userActions.js
├── reducers/
│   ├── todosReducer.js
│   └── userReducer.js
├── selectors/
│   ├── todosSelectors.js
│   └── userSelectors.js
└── store.js

Action Types:

• Constants: Use constants or enums for action types to prevent typos and ensure consistency.

// Action types
export const ADD_TODO = 'ADD_TODO';
export const DELETE_TODO = 'DELETE_TODO';

Reducer Composition:

• Combine reducers: Use combineReducers from Redux to combine multiple reducers into a single root reducer.

import { combineReducers } from 'redux';
import todosReducer from './todosReducer';
import userReducer from './userReducer';

const rootReducer = combineReducers({
  todos: todosReducer,
  user: userReducer
});

export default rootReducer;

Immutable State Updates

Immutability with Spread Operator:

• Use spread operator (...): Create new objects or arrays when updating state to maintain immutability.

// Updating an array in Redux state
const todosReducer = (state = initialState, action) => {
  switch (action.type) {
    case ADD_TODO:
      return {
        ...state,
        todos: [
          ...state.todos,
          {
            id: action.id,
            text: action.text,
            completed: false
          }
        ]
      };
    case TOGGLE_TODO:
      return {
        ...state,
        todos: state.todos.map(todo =>
          (todo.id === action.id) ? { ...todo, completed: !todo.completed } : todo
        )
      };
    default:
      return state;
  }
};

Immutable Libraries:

• Immutable.js: Consider using libraries like Immutable.js for more complex data structures to enforce immutability and optimize performance.

import { Map, List } from 'immutable';

const initialState = Map({
  todos: List(),
  user: Map()
});

const todosReducer = (state = initialState, action) => {
  switch (action.type) {
    case ADD_TODO:
      return state.update('todos', todos => todos.push(Map({
        id: action.id,
        text: action.text,
        completed: false
      })));

    case TOGGLE_TODO:
      return state.update('todos', todos =>
        todos.map(todo =>
          (todo.get('id') === action.id) ? todo.set('completed', !todo.get('completed')) : todo
        )
      );

    default:
      return state;
  }
};

Testing Redux Applications

Unit Testing:

• Reducers: Test reducers to ensure they handle actions correctly and return the expected state.

describe('todosReducer', () => {
  it('should handle ADD_TODO', () => {
    const action = { type: 'ADD_TODO', id: 1, text: 'Test todo' };
    const initialState = { todos: [] };
    const expectedState = { todos: [{ id: 1, text: 'Test todo', completed: false }] };

    expect(todosReducer(initialState, action)).toEqual(expectedState);
  });
});

Integration Testing:

• Action Creators and Thunks: Test action creators and thunks to verify they dispatch the correct actions or handle asynchronous operations.

describe('fetchPosts action creator', () => {
  it('creates FETCH_POSTS_SUCCESS when fetching posts has been done', () => {
    const expectedActions = [
      { type: 'FETCH_POSTS_REQUEST' },
      { type: 'FETCH_POSTS_SUCCESS', payload: { /* mocked data */ } }
    ];

    const store = mockStore({ posts: [] });

    return store.dispatch(fetchPosts()).then(() => {
      expect(store.getActions()).toEqual(expectedActions);
    });
  });
});

Integration with Components:

• Connected Components: Test connected components using redux-mock-store to simulate Redux store behavior.

import configureStore from 'redux-mock-store';
import { Provider } from 'react-redux';
import { render } from '@testing-library/react';
import App from './App';

const mockStore = configureStore([]);

describe('<App />', () => {
  it('renders App component', () => {
    const store = mockStore({ /* mocked state */ });

    const { getByText } = render(
      <Provider store={store}>
        <App />
      </Provider>
    );

    expect(getByText('Welcome to Redux App')).toBeInTheDocument();
  });
});

Conclusion

Redux offers a powerful state management solution for JavaScript applications, providing a predictable and centralized way to manage application state.

Whether handling asynchronous operations with middleware like Redux Thunk or Redux Saga, or optimizing state management through immutable data practices, Redux empowers you to build scalable and maintainable applications.

By mastering these techniques, you can leverage Redux to streamline data flow, enhance application performance, and simplify the complexities of managing state in modern web development.

That's all for this article! If you'd like to continue the conversation or have questions, suggestions, or feedback, feel free to reach out to connect with me on LinkedIn. And if you enjoyed this content, consider buying me a coffee to support the creation of more developer-friendly contents.

However, handling asynchronous actions in Redux can be a bit tricky. That's where Redux middleware like Redux-Thunk comes to the rescue.

In essence, Redux-Thunk enhances the capabilities of Redux by providing a straightforward and efficient mechanism for managing asynchronous actions. It enables developers to write clean, predictable, and maintainable code while ensuring the integrity of the application's state management.

Table of Contents

1. Introduction to Redux-Thunk

2. 1.1. Understanding Middleware in Redux

3. 1.2. The Role of Redux-Thunk

4. Installation and Setup

5. Working with Redux-Thunk

6. 3.1. Writing Thunk Functions

7. 3.2. Dispatching Thunk Actions

8. Handling Asynchronous Operations

9. 4.1. Making Asynchronous API Calls

10. 4.2. Managing Side Effects with Thunks

11. Advanced Techniques

12. 5.1. Error Handling in Thunks

13. 5.2. Chaining Multiple Thunks

14. Best Practices

15. 6.1. Structuring Thunks for Maintainability

16. 6.2. Avoiding Common Pitfalls

17. 6.3. Testing Thunk Functions

18. Real-World Examples

19. 7.1. Integration with React Applications

20. 7.2. Use Cases in Large-Scale Projects

21. Performance Considerations

22. Alternatives to Redux-Thunk

23. 9.1. Comparison with Other Middleware

24. 9.2. When to Choose Redux-Thunk

10. Conclusion

1. Introduction to Redux-Thunk

Redux-Thunk is a middleware for Redux that allows you to write action creators that return a function instead of an action object. This function receives the store's dispatch method and getState function as arguments, allowing it to dispatch multiple actions, perform asynchronous operations, and access the current state if needed before dispatching an action.

1.1. Understanding Middleware in Redux

Before diving into Redux-Thunk, let's briefly discuss what middleware is in the context of Redux.

Middleware provides a way to interact with actions dispatched to the Redux store before they reach the reducer. It sits between the action dispatch and the reducer, allowing you to intercept, modify, or delay actions as needed.

It provides a way to extend Redux's functionality by intercepting and potentially modifying actions before they reach the reducers.

1.2. The Role of Redux-Thunk

The primary purpose of Redux-Thunk is to handle asynchronous actions in Redux. Asynchronous actions, such as fetching data from an API or performing asynchronous computations, are common in web applications.

Redux-Thunk enables you to dispatch actions asynchronously, making it easier to manage side effects in your Redux applications.

2. Installation and Setup

Setting up Redux-Thunk in your Redux project is straightforward. First, you need to install the redux-thunk package using npm or yarn:

npm install redux-thunk
# or
yarn add redux-thunk

Once installed, you can integrate Redux-Thunk into your Redux store by applying it as middleware when creating the store:

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const store = createStore(
  rootReducer,
  applyMiddleware(thunk)
);

By applying Redux-Thunk middleware using applyMiddleware, you enable Redux to recognize and process thunk functions when they are dispatched.

3. Working with Redux-Thunk

Now that Redux-Thunk is set up in your project, let's explore how to work with it effectively.

3.1. Writing Thunk Functions

Writing thunk functions in Redux involves defining asynchronous action creators that return a function instead of a plain action object. These functions have access to the dispatch and getState methods of the Redux store, allowing you to perform asynchronous operations and dispatch actions based on the results.

Here's how you can write thunk functions in Redux:

// actions.js
import axios from 'axios';

// Action types
export const FETCH_DATA_REQUEST = 'FETCH_DATA_REQUEST';
export const FETCH_DATA_SUCCESS = 'FETCH_DATA_SUCCESS';
export const FETCH_DATA_FAILURE = 'FETCH_DATA_FAILURE';

// Action creators
export const fetchDataRequest = () => ({
  type: FETCH_DATA_REQUEST
});

export const fetchDataSuccess = (data) => ({
  type: FETCH_DATA_SUCCESS,
  payload: data
});

export const fetchDataFailure = (error) => ({
  type: FETCH_DATA_FAILURE,
  payload: error
});

// Thunk action creator
export const fetchData = () => {
  return async (dispatch, getState) => {
    dispatch(fetchDataRequest());
    try {
      const response = await axios.get('https://api.example.com/data');
      dispatch(fetchDataSuccess(response.data));
    } catch (error) {
      dispatch(fetchDataFailure(error.message));
    }
  };
};

In this example:

1. We defined action types for different stages of the data fetching process: request, success, and failure.
2. We defined action creators for each action type, which return plain action objects with the appropriate type and payload.
3. We defined a thunk action creator called fetchData, which returns a function instead of a plain action object. This function receives dispatch and getState as arguments, allowing us to dispatch actions and access the current Redux state.
4. Inside the thunk function, we dispatch the FETCH_DATA_REQUEST action to indicate that the data fetching process has started.
5. We used axios (you can use any other HTTP client) to make an asynchronous GET request to fetch data from an API endpoint.
6. If the request is successful, we dispatch the FETCH_DATA_SUCCESS action with the fetched data as the payload.
7. If the request fails, we dispatch the FETCH_DATA_FAILURE action with the error message as the payload.

Thunk functions provide a flexible and powerful way to handle asynchronous actions in Redux, allowing you to encapsulate complex asynchronous logic and manage side effects effectively.

3.2. Dispatching Thunk Actions

You can dispatch thunk actions just like regular actions using the dispatch method provided by the Redux store:

store.dispatch(fetchUser());

When you dispatch a thunk action, Redux-Thunk intercepts it and invokes the thunk function with the dispatch method and getState function as arguments.

This allows the thunk function to perform asynchronous operations and dispatch additional actions if needed.

4. Handling Asynchronous Operations

One of the main benefits of Redux-Thunk is its ability to handle asynchronous operations seamlessly. Let's explore some common scenarios where Redux-Thunk shines:

4.1. Making Asynchronous API Calls

Making asynchronous API calls in Redux thunks is a common use case for handling data fetching and updating in React applications.

Here's how you can make asynchronous API calls in Redux thunks:

A. Import Necessary Dependencies

First, make sure you have the necessary dependencies installed. You'll typically need Redux, Redux Thunk middleware, and a library for making HTTP requests, such as Axios or Fetch.

npm install redux redux-thunk axios

B. Create Thunk Action Creators

Define thunk action creators that will dispatch actions for handling API requests. Thunks are functions that return another function, allowing you to perform asynchronous operations before dispatching actions.

// actions.js
import axios from 'axios';

export const fetchDataRequest = () => ({ type: 'FETCH_DATA_REQUEST' });
export const fetchDataSuccess = (data) => ({ type: 'FETCH_DATA_SUCCESS', payload: data });
export const fetchDataFailure = (error) => ({ type: 'FETCH_DATA_FAILURE', payload: error });

export const fetchData = () => {
  return async (dispatch) => {
    dispatch(fetchDataRequest());
    try {
      const response = await axios.get('https://api.example.com/data');
      dispatch(fetchDataSuccess(response.data));
    } catch (error) {
      dispatch(fetchDataFailure(error.message));
    }
  };
};

C. Dispatch Thunk Actions

Dispatch the thunk action creator from your component when you need to fetch data. This will trigger the asynchronous API call and update the Redux store accordingly.

// SomeComponent.js
import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchData } from './actions';

const SomeComponent = () => {
  const dispatch = useDispatch();
  const { data, isLoading, error } = useSelector(state => state.someReducer);

  useEffect(() => {
    dispatch(fetchData());
  }, [dispatch]);

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error}</div>;
  }

  return (
    <div>
      {/* Display fetched data */}
    </div>
  );
};

export default SomeComponent;

D. Update Reducer

Update the reducer to handle the dispatched actions and update the state accordingly.

// reducers.js
const initialState = {
  data: null,
  isLoading: false,
  error: null
};

const someReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'FETCH_DATA_REQUEST':
      return { ...state, isLoading: true, error: null };
    case 'FETCH_DATA_SUCCESS':
      return { ...state, data: action.payload, isLoading: false };
    case 'FETCH_DATA_FAILURE':
      return { ...state, error: action.payload, isLoading: false };
    default:
      return state;
  }
};

export default someReducer;

E. Set Up Redux Store

Finally, set up your Redux store with Redux Thunk middleware.

// store.js
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const store = createStore(rootReducer, applyMiddleware(thunk));

export default store;

Now your Redux application is set up to make asynchronous API calls using Redux thunks. Thunks provide a convenient way to handle asynchronous operations in Redux and integrate seamlessly with the Redux workflow.

4.2. Managing Side Effects with Thunks

Managing side effects, such as asynchronous operations, in Redux applications can be effectively done using thunks.

Thunks allow you to encapsulate complex logic, including side effects, within action creators, providing a centralized and organized way to handle such operations.

Here's how you can manage side effects with thunks:

A. Define Thunk Action Creators

Create thunk action creators that encapsulate the asynchronous logic or side effects you want to manage.

Thunks are functions that return another function, giving you access to the dispatch function and the Redux store's getState method.

// actions.js
import axios from 'axios';

export const fetchDataRequest = () => ({ type: 'FETCH_DATA_REQUEST' });
export const fetchDataSuccess = (data) => ({ type: 'FETCH_DATA_SUCCESS', payload: data });
export const fetchDataFailure = (error) => ({ type: 'FETCH_DATA_FAILURE', payload: error });

export const fetchData = () => {
  return async (dispatch) => {
    dispatch(fetchDataRequest());
    try {
      const response = await axios.get('https://api.example.com/data');
      dispatch(fetchDataSuccess(response.data));
    } catch (error) {
      dispatch(fetchDataFailure(error.message));
    }
  };
};

B. Dispatch Thunk Actions

Dispatch the thunk action creator from your components when you need to trigger the side effect. This will execute the asynchronous logic encapsulated within the thunk.

// SomeComponent.js
import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchData } from './actions';

const SomeComponent = () => {
  const dispatch = useDispatch();
  const { data, isLoading, error } = useSelector(state => state.someReducer);

  useEffect(() => {
    dispatch(fetchData());
  }, [dispatch]);

  // Render UI based on the fetched data, loading state, or error status
};

export default SomeComponent;

C. Update Reducer

Update the reducer to handle the dispatched actions and update the Redux store state accordingly. This typically involves updating the state to reflect the loading state, success, or failure of the asynchronous operation.

// reducers.js
const initialState = {
  data: null,
  isLoading: false,
  error: null
};

const someReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'FETCH_DATA_REQUEST':
      return { ...state, isLoading: true, error: null };
    case 'FETCH_DATA_SUCCESS':
      return { ...state, data: action.payload, isLoading: false };
    case 'FETCH_DATA_FAILURE':
      return { ...state, error: action.payload, isLoading: false };
    default:
      return state;
  }
};

export default someReducer;

D. Set Up Redux Store with Thunk Middleware

Ensure that you have set up your Redux store with Redux Thunk middleware to enable thunk action creators.

// store.js
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const store = createStore(rootReducer, applyMiddleware(thunk));

export default store;

With thunks, you can manage side effects such as data fetching, API calls, or any asynchronous operations in a structured and centralized manner within your Redux application.

Thunks promote separation of concerns and make it easier to test and maintain asynchronous logic within your Redux codebase.

5. Advanced Techniques

Redux-Thunk offers several advanced techniques for handling complex scenarios. Let's explore some of them:

5.1. Error Handling in Thunks

Error handling in thunks is essential to ensure that your Redux application behaves predictably and gracefully handles errors that occur during asynchronous operations, such as API requests.

Here's how you can handle errors effectively in thunks:

A. Catch Errors in Thunks

export const fetchData = () => {
  return async (dispatch) => {
    dispatch(fetchDataRequest());
    try {
      const response = await fetch('https://api.example.com/data');
      if (!response.ok) {
        throw new Error('Failed to fetch data');
      }
      const data = await response.json();
      dispatch(fetchDataSuccess(data));
    } catch (error) {
      dispatch(fetchDataFailure(error.message));
    }
  };
};

In this example:

• We used a try...catch block to catch any errors that occur during the asynchronous operation (in this case, fetching data from an API).
• If an error occurs, we dispatch an action to handle the error (fetchDataFailure), passing the error message as payload.

B. Handle Errors Appropriately

• Dispatch specific error actions based on the type of error encountered.
• Include meaningful error messages or error codes in error actions to provide context for debugging and user feedback.
• Consider whether certain errors should trigger additional actions or side effects, such as logging errors or displaying error notifications.

C. Centralize Error Handling Logic

// sharedThunks.js

export const handleApiError = (error) => {
  return (dispatch) => {
    dispatch(showErrorNotification(error.message));
    dispatch(logError(error));
  };
};

In this example:

• We defined a shared thunk (handleApiError) responsible for handling errors from API requests.
• This thunk dispatches actions to display error notifications and log errors.
• Centralizing error handling logic in shared thunks promotes consistency and reusability across different parts of your application.

D. Test Error Scenarios

• Write unit tests to cover error handling scenarios in your thunks.
• Mock API requests to simulate different error conditions, such as network errors or server errors.
• Verify that the thunk dispatches the correct error actions and handles errors appropriately.

E. Consider Retry Strategies

• Implement retry strategies for handling transient errors, such as temporary network issues or rate-limiting errors.
• Thunks can include retry logic to attempt the operation again after a delay or a certain number of retries.

By effectively handling errors in thunks, you can improve the robustness and reliability of your Redux application, providing users with a better experience and simplifying debugging and maintenance efforts.

5.2. Chaining Multiple Thunks

Thunks can be chained together to perform complex sequences of asynchronous operations. This is useful when you need to perform multiple asynchronous tasks sequentially:

const fetchUserAndPosts = () => {
  return async (dispatch, getState) => {
    try {
      // Fetch user
      dispatch({ type: 'FETCH_USER_REQUEST' });
      const userResponse = await fetch('https://api.example.com/user');
      const user = await userResponse.json();
      dispatch({ type: 'FETCH_USER_SUCCESS', payload: user });

      // Fetch posts
      dispatch({ type: 'FETCH_POSTS_REQUEST' });


 const postsResponse = await fetch('https://api.example.com/posts');
      const posts = await postsResponse.json();
      dispatch({ type: 'FETCH_POSTS_SUCCESS', payload: posts });
    } catch (error) {
      dispatch({ type: 'FETCH_FAILURE', error: error.message });
    }
  };
};

By chaining multiple thunk functions together, you can orchestrate complex asynchronous workflows with ease.

6. Best Practices

While Redux-Thunk provides powerful capabilities for handling asynchronous actions, it's essential to follow best practices to ensure your code remains maintainable and efficient.

Here are some best practices to consider:

6.1. Structuring Thunks for Maintainability

Structuring thunks for maintainability is crucial to ensure that your Redux code remains organized, scalable, and easy to maintain as your application grows.

Here's a recommended approach for structuring thunks:

Separate Concerns

a. Action Types and Action Creators

• Define action types and action creators separately to promote reusability and maintainability.
• Group related action types and creators in logical modules or files.

b. Thunk Functions

• Define thunk functions separately from action creators to keep the concerns of asynchronous operations distinct from synchronous actions.

Modularize Thunks

a. Module-Level Thunks

• Group related thunk functions within modules or feature slices of your application.
• Each module can contain its own set of thunks responsible for handling asynchronous operations related to that module.

b. Reusable Thunks

• Extract reusable thunks into separate files or utility modules that can be shared across different parts of your application.
• Common asynchronous operations, such as data fetching or authentication, can be encapsulated as reusable thunks.

Encapsulate Complex Logic

a. Action Composition

• Encapsulate complex logic related to action composition within thunks.
• Thunks can orchestrate multiple synchronous actions to perform a higher-level operation.

b. Error Handling:

• Centralize error handling logic within thunks to ensure consistent error reporting and recovery strategies.
• Thunks can catch and handle errors from asynchronous operations before dispatching appropriate error actions.

Use Async/Await for Readability

a. Async/Await Syntax

• Use async/await syntax within thunks for cleaner and more readable asynchronous code.
• Async functions make it easier to manage asynchronous control flow when compared to using raw Promises.

Example Structure

Here's an example of how you can structure thunks for maintainability:

src/
├── actions/
│   ├── actionTypes.js
│   ├── feature1Actions.js
│   ├── feature2Actions.js
│   └── ...
├── thunks/
│   ├── feature1Thunks.js
│   ├── feature2Thunks.js
│   ├── sharedThunks.js
│   └── index.js
├── reducers/
│   ├── feature1Reducer.js
│   ├── feature2Reducer.js
│   └── ...
└── store.js

In this structure:

• feature1Thunks.js and feature2Thunks.js contain thunks specific to different features/modules of your application.
• sharedThunks.js contains reusable thunks shared across multiple features.
• index.js exports all thunks to be imported into the Redux store setup.
• Action types and action creators are defined in separate files within the actions directory.

By structuring thunks in a modular and organized manner, you can improve the maintainability of your Redux codebase.

Separating concerns, encapsulating complex logic, and promoting reusability will make it easier to manage and extend your application's asynchronous behavior over time.

6.2. Avoiding Common Pitfalls

Avoiding common pitfalls when working with Redux-Thunk can help maintain a smoother development process and ensure the reliability of your Redux applications.

Here are some common pitfalls to watch out for and how to avoid them:

Overusing Thunks for Synchronous Actions

• Thunks are primarily meant for handling asynchronous actions. Overusing them for synchronous actions can lead to unnecessary complexity in your code.
• Solution: Reserve thunks for asynchronous actions like data fetching or API calls. For synchronous actions, define regular action creators that directly return action objects.

Excessive Logic in Thunks

• Putting too much logic inside thunks can make them hard to understand, test, and maintain.
• Solution: Keep thunks focused on dispatching actions and handling asynchronous operations. Extract complex logic into separate functions or utilities that can be tested independently.

Lack of Error Handling

• Failing to handle errors properly in thunks can result in unexpected behavior or application crashes.
• Solution: Ensure that your thunks handle errors gracefully by catching exceptions and dispatching appropriate error actions. This includes handling errors from asynchronous operations like API requests.

Inefficient Data Fetching

• Inefficient data fetching practices, such as fetching the same data repeatedly or fetching unnecessary data, can impact performance.
• Solution: Implement caching mechanisms to store fetched data locally and avoid redundant API requests. Use memoization techniques or selectors to optimize data fetching and avoid unnecessary re-rendering.

Poor Testing Practices

• Inadequate testing of thunks can result in undetected bugs and regressions.
• Solution: Write comprehensive unit tests for your thunks to cover different scenarios, including successful and failed asynchronous operations. Mock external dependencies like API requests to isolate the behavior of thunks.

Uncontrolled Side Effects

• Thunks that trigger unintended side effects or have unpredictable behavior can lead to bugs and unexpected application states.
• Solution: Be mindful of the side effects introduced by your thunks, such as modifying global state or interacting with external systems. Keep side effects under control and clearly document the behavior of your thunks.

Complex Middleware Composition

• Adding multiple middleware layers, such as logging or analytics, without proper organization and coordination can make the middleware pipeline hard to manage.
• Solution: Keep the middleware composition simple and well-organized. Use middleware libraries like Redux DevTools Extension to debug and monitor middleware behavior during development.

By avoiding these common pitfalls and following best practices when working with Redux-Thunk, you can improve the reliability, performance, and maintainability of your Redux applications.

6.3. Testing Thunk Functions

Testing thunk functions in Redux applications is crucial to ensure that asynchronous actions behave as expected.

When testing thunk functions, you want to verify that the correct actions are dispatched under various conditions, such as successful API requests, failed requests, or edge cases.

Here's how you can test thunk functions using popular testing frameworks like Jest and testing utilities like Redux Mock Store:

Example Test Setup

Let's assume we have a thunk function called fetchData that fetches data from an API and dispatches corresponding actions based on the result:

// actions.js
export const fetchDataRequest = () => ({ type: 'FETCH_DATA_REQUEST' });
export const fetchDataSuccess = (data) => ({ type: 'FETCH_DATA_SUCCESS', payload: data });
export const fetchDataFailure = (error) => ({ type: 'FETCH_DATA_FAILURE', payload: error });

// thunks.js
import { fetchDataRequest, fetchDataSuccess, fetchDataFailure } from './actions';

export const fetchData = () => {
  return async (dispatch) => {
    dispatch(fetchDataRequest());
    try {
      const response = await fetch('https://api.example.com/data');
      const data = await response.json();
      dispatch(fetchDataSuccess(data));
    } catch (error) {
      dispatch(fetchDataFailure(error.message));
    }
  };
};

Writing Tests

Here's how you can write tests for the fetchData thunk function:

// thunks.test.js
import configureMockStore from 'redux-mock-store';
import thunk from 'redux-thunk';
import fetchMock from 'jest-fetch-mock';
import { fetchData } from './thunks';
import { fetchDataRequest, fetchDataSuccess, fetchDataFailure } from './actions';

const middlewares = [thunk];
const mockStore = configureMockStore(middlewares);

fetchMock.enableMocks();

describe('fetchData thunk', () => {
  beforeEach(() => {
    fetchMock.resetMocks();
  });

  it('dispatches fetchDataSuccess action after successful API request', async () => {
    const mockData = { id: 1, name: 'Example Data' };
    fetchMock.mockResponse(JSON.stringify(mockData));
    const expectedActions = [
      fetchDataRequest(),
      fetchDataSuccess(mockData)
    ];
    const store = mockStore();

    await store.dispatch(fetchData());
    expect(store.getActions()).toEqual(expectedActions);
  });

  it('dispatches fetchDataFailure action after failed API request', async () => {
    const errorMessage = 'Failed to fetch data';
    fetchMock.mockReject(new Error(errorMessage));
    const expectedActions = [
      fetchDataRequest(),
      fetchDataFailure(errorMessage)
    ];
    const store = mockStore();

    await store.dispatch(fetchData());
    expect(store.getActions()).toEqual(expectedActions);
  });
});

Here's what happens in the code above:

Mocking Fetch API:

• We used Jest's fetchMock to mock the fetch function, allowing us to control its behavior during testing.

Configuring Redux Mock Store:

• We configured a mock Redux store using redux-mock-store, enabling us to simulate Redux store behavior in our tests.

Dispatching Thunk Function:

• We dispatched the fetchData thunk function using the mock store and then await its completion.

Expectations:

• We assert that the expected actions are dispatched based on different scenarios (successful or failed API requests).

Resetting Mocks:

• We reset the mocks before each test to ensure that they start in a clean state.

By writing tests for thunk functions in this manner, you can verify their behavior under various conditions, ensuring the reliability and correctness of your Redux application's asynchronous actions.

7. Real-World Examples

To demonstrate the practical use of Redux-Thunk, let's look at some real-world examples of how it can be used in a Redux application.

7.1. Integration with React Applications

Redux-Thunk integrates seamlessly with React applications, allowing you to manage asynchronous data fetching, state updates, and side effects efficiently.

Here's a simple example of using Redux-Thunk with React:

// Component.js
import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchUser } from './redux/userThunks';

const Component = () => {
  const dispatch = useDispatch();
  const user = useSelector(state => state.user);

  useEffect(() => {
    dispatch(fetchUser());
  }, [dispatch]);

  return (
    <div>
      {user ? <div>{user.name}</div> : <div>Loading...</div>}
    </div>
  );
};

export default Component;

7.2. Use Cases in Large-Scale Projects

In large-scale React projects, Redux-Thunk can be a valuable tool for managing asynchronous actions and handling complex logic.

Here are some common use cases for Redux-Thunk in large-scale projects:

Data Fetching

• Large-scale applications often need to fetch data from multiple APIs or endpoints. Redux-Thunk allows you to encapsulate these asynchronous operations in action creators.
• You can handle scenarios like fetching initial data when a component mounts, paginating through large datasets, or refreshing data periodically.

Authentication

• Implementing authentication flows, such as logging in, logging out, or refreshing tokens, often involves asynchronous operations like making API requests and updating the user's authentication state.
• Redux-Thunk can manage these operations, dispatching actions to update the authentication state based on the API responses and handling any errors that occur during the process.

Form Submission

• Large-scale forms with complex validation requirements and submission processes may require asynchronous actions to handle form submissions.
• Redux-Thunk can dispatch actions to submit form data, handle server responses (success or error), and update the application state accordingly.

Optimistic Updates

• In applications where user interactions trigger asynchronous actions with optimistic UI updates, Redux-Thunk can help manage the flow of actions.
• You can dispatch optimistic actions to update the UI immediately and then dispatch additional actions based on the success or failure of the asynchronous operation.

WebSocket Integration

• Large-scale applications often use WebSocket connections for real-time communication with servers.
• Redux-Thunk can be used to manage WebSocket connections and dispatch actions in response to incoming messages or events, such as updating UI components or triggering additional actions.

Complex Business Logic

• As applications grow in complexity, they may require more sophisticated business logic to handle various scenarios and edge cases.
• Redux-Thunk allows you to encapsulate complex logic within action creators, making it easier to manage and test.

Middleware Composition

• In large-scale projects, you may have multiple middleware layers in your Redux setup for tasks like logging, error handling, or analytics.
• Redux-Thunk can be seamlessly integrated into the middleware pipeline, allowing you to compose multiple middleware functions to handle different aspects of your application's behavior.

By leveraging Redux-Thunk in these use cases, you can effectively manage asynchronous actions, handle complex application logic, and maintain a scalable and maintainable codebase in large-scale React projects.

8. Performance Considerations

While Redux-Thunk provides powerful capabilities for handling asynchronous actions, it's essential to consider its impact on the performance of your application.

Here are some performance considerations to keep in mind:

Asynchronous Operations

Redux-Thunk enables handling asynchronous operations, such as making API requests or performing computations that take time to complete.

These operations can introduce latency into your application, impacting overall performance.

Blocking the Event Loop

Long-running synchronous tasks within thunks can potentially block the JavaScript event loop, leading to unresponsive user interfaces.

Avoid blocking the event loop by offloading heavy computations to worker threads or breaking them into smaller asynchronous tasks.

Middleware Overhead

Adding middleware to the Redux middleware pipeline incurs a slight performance overhead, as each middleware function needs to process dispatched actions sequentially.

While this overhead is generally minimal, it's essential to keep middleware composition efficient.

Thunk Composition

The composition of multiple thunks can impact performance, especially if thunks trigger additional asynchronous operations sequentially.

Carefully consider thunk composition to minimize unnecessary delays and optimize performance.

Redux DevTools Integration

Enabling Redux DevTools for debugging purposes can impact performance, especially when recording or replaying actions.

Use Redux DevTools judiciously, especially in production environments, to minimize performance overhead.

Memoization and Caching

Implement memoization techniques or caching for fetched data to reduce redundant computations and API requests.

Memoization ensures that expensive computations are performed only when necessary, improving application responsiveness.

Code Splitting and Dynamic Imports

Consider code-splitting your Redux-related code and dynamically importing thunks or reducers only when needed. This approach can reduce the initial bundle size of your application and improve load times, especially for large-scale applications.

Testing and Profiling

Regularly test and profile your application to identify performance bottlenecks and areas for optimization. Use performance profiling tools to measure the impact of Redux-Thunk on application responsiveness and identify opportunities for improvement.

By considering these performance considerations and following best practices, you can ensure that your Redux-Thunk-based application remains responsive and efficient, providing a smooth user experience. Balancing the power of Redux-Thunk with performance optimizations is essential for building high-performing Redux applications.

9. Alternatives to Redux-Thunk

While Redux-Thunk is a popular choice for handling asynchronous actions in Redux, there are alternative middleware solutions available that offer similar or additional capabilities.

Some popular alternatives to Redux-Thunk include Redux-Saga, Redux-Observable.

9.1. Comparison with Other Middleware

Each middleware solution has its own strengths and weaknesses, depending on the specific requirements of your application.

Here's a brief comparison of Redux-Thunk with other middleware solutions:

Redux-Saga

• Redux-Saga is a library for managing side effects in Redux applications. It uses ES6 Generators to make asynchronous code easier to read, write, and test.
• Sagas are defined as separate functions that listen for specific Redux actions and can then perform asynchronous operations in a more declarative and testable way.
• Redux-Saga is great for handling complex asynchronous logic, such as race conditions, cancellations, and retries.

Here's an example of a Redux-Saga:

function* fetchData() {
  try {
    const data = yield call(api.fetchData);
    yield put({ type: 'FETCH_DATA_SUCCESS', payload: data });
  } catch (error) {
    yield put({ type: 'FETCH_DATA_FAILURE', payload: error });
  }
}

function* watchFetchData() {
  yield takeEvery('FETCH_DATA_REQUEST', fetchData);
}

Redux-Thunk-Extra

• Redux-Thunk-Extra is an enhanced version of Redux-Thunk with additional features like promise support and action creators for starting, succeeding, and failing async operations.
• It provides a simpler API when compared to Redux-Saga and can be a good choice if you prefer the familiar thunk-style syntax but need more features.

Here's an example of using Redux-Thunk-Extra with promises:

const fetchData = () => {
  return (dispatch) => {
    dispatch({ type: 'FETCH_DATA_START' });

    api.fetchData()
      .then(data => dispatch({ type: 'FETCH_DATA_SUCCESS', payload: data }))
      .catch(error => dispatch({ type: 'FETCH_DATA_FAILURE', payload: error }));
  };
};

Redux-Observable

• Redux-Observable is a middleware for Redux based on RxJS, a powerful library for reactive programming.
• It allows you to express complex asynchronous workflows using observable streams, making it suitable for handling events over time, such as user inputs or WebSocket connections.
• Redux-Observable is a good choice for applications with a heavy focus on reactive programming or where you need fine-grained control over asynchronous behavior.

Here's an example of using Redux-Observable:

const fetchDataEpic = action$ => action$.pipe(
  ofType('FETCH_DATA_REQUEST'),
  mergeMap(() =>
    ajax.getJSON('https://api.example.com/data').pipe(
      map(response => ({ type: 'FETCH_DATA_SUCCESS', payload: response })),
      catchError(error => of({ type: 'FETCH_DATA_FAILURE', payload: error }))
    )
  )
);

Fetch API with Async/Await

• If your asynchronous operations are relatively simple and you prefer to keep your dependencies minimal, you can use the Fetch API combined with async/await syntax directly in your action creators without any middleware.
• This approach works well for simple data fetching scenarios but may become unwieldy for more complex async logic.

Each of these alternatives has its own strengths and use cases, so choose the one that best fits your project requirements and coding preferences.

9.2. When to Choose Redux-Thunk

Redux-Thunk is an excellent choice for handling simple to moderately complex asynchronous actions in Redux applications. It's lightweight, easy to understand, and integrates seamlessly with existing Redux codebases.

Consider using Redux-Thunk for:

Asynchronous Operations

• Use Redux-Thunk when you need to perform asynchronous operations like fetching data from an API, handling timers, or any operation that doesn't immediately return a value.

Here's an example of how Redux-Thunk handles an asynchronous action, like fetching data:

// Action creator with Redux-Thunk
const fetchData = () => {
  return (dispatch) => {
    dispatch({ type: 'FETCH_DATA_REQUEST' });

    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => dispatch({ type: 'FETCH_DATA_SUCCESS', payload: data }))
      .catch(error => dispatch({ type: 'FETCH_DATA_FAILURE', payload: error }));
  };
};

Middleware Functionality

• Redux-Thunk is a middleware, meaning it sits between an action being dispatched and the moment it reaches the reducer. This allows for additional functionality like logging, modifying actions, or handling side effects.
• If you need to perform actions before or after an action is dispatched, Redux-Thunk is a good choice.

Simple Setup

• Redux-Thunk integrates seamlessly with Redux, requiring minimal setup. It's easy to add to an existing Redux project.

Here's how you can add Redux-Thunk to your Redux store:

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const store = createStore(rootReducer, applyMiddleware(thunk));

Handling Complex Logic

• If your application involves complex asynchronous logic, such as multiple API calls or conditional dispatching, Redux-Thunk provides a straightforward way to manage such complexity.
• You can encapsulate complex logic within thunk action creators, keeping your components clean and focused on presentation.

Community Support and Resources

• Redux-Thunk is a widely used middleware for Redux, which means there are plenty of resources, tutorials, and community support available.
• If you're new to Redux or asynchronous data fetching in Redux, choosing Redux-Thunk can provide you with a wealth of learning materials and examples.

Choose Redux-Thunk when you need to handle asynchronous operations in your Redux application, want to keep your setup simple, require middleware functionality, need to manage complex logic, or benefit from community support and resources.

10. Conclusion

Redux-Thunk is a powerful middleware for handling asynchronous actions in Redux applications. By allowing you to write thunk functions that encapsulate asynchronous logic, Redux-Thunk simplifies the process of managing side effects and coordinating complex workflows.

Whether you're fetching data from an API, performing background computations, or synchronizing state across different parts of your application, Redux-Thunk provides a flexible and intuitive solution for managing asynchronous actions in Redux.

In this comprehensive guide, we've covered everything you need to know about Redux-Thunk, from installation and setup to advanced techniques and best practices.

By following the principles outlined in this guide and applying them to your Redux projects, you'll be well-equipped to handle asynchronous actions effectively and build robust, maintainable Redux applications.

And it's not something you'll use only in React.js, but also in other popular tools like Angular.js, Vue.js, and Next.js.

There are two common ways to manage a state: useState and Redux. But there are also other options like MobX, Zustand, and Recoil.

In this article, we'll learn about state management and why it's important. We'll also explore common state management methods and understand how they work.

After reading this article, you'll be able to pick the best state management method for your app.

Prerequisites

• Have an understanding of React.
• Make sure you install Node.js on your system.

What is State Management and Why Is It Important?

State management is a crucial part of application development. It lets programmers control how the app responds to different events and user actions.

It helps you create dynamic and interactive interfaces, making the user experience better.

What Sort of Sites/Apps Use State Management?

State management is used in lots of websites and apps, from simple to complex ones.

React and frameworks like Angular.js, Vue.js, and Next.js often use state management to handle data and control how components behave.

What to Consider When Choosing a State Management Strategy

1. The application's complexity: For simple apps with few components, use useState(). For complex apps with extensive state interactions, choose Redux.
2. Team size and skill level: useState() is okay for smaller teams or developers new to state management because it's easy to understand. Redux can be good for larger teams with experienced developers.
3. Sharing State: Redux centralized state management is easier to use in some cases than useState().
4. Scalability: Redux offers advanced features that help manage complex states.

State Management Examples:useState() vs Redux

To understand state management better, let's check out a practical example that shows how useState() and Redux work in React.

Setting Up the Project

First, go to the project folder. Create a React boilerplate using the create-react-app command or the Vite tool.

I prefer vite (and this is what the React document currently recommends), because it's faster for development and easier to configure. Vite is also more versatile and supports other front-end frameworks such as Svelte. But if you prefer, create-react-app is still an option.

Next, in the terminal of your editor, type this command:

npx create-react-app ./ or npx create-vite@latest ./

./ creates the React boilerplate for you right inside the created folder or directory.

Creating the react boilerplate (template)

Option 1: Managing State with useState()

useState() is a built-in hook in React. It manages the state of React applications locally.

useState() introduces state management capabilities in functional components. This means you can now use stateful logic within functional components.

In React, you have access to various other hooks that you can import and use in your applications. These hooks make your app more dynamic and efficient.

Check out this article to learn more: Simplify your React programming effortlessly with these 8 amazing hooks.

For more information on the useState() hook, you can check out this tutorial. It will provide you with detailed insights and examples related to useState() in React.

Pros of Using the useState() Hook in a React Application

1. useState() has a smaller footprint than external state management libraries like Redux. This reduces the application's bundle size and improves performance.
2. It allows for more clear and intuitive state management within functional components.

Cons of Using the useState() Hook in a React Application

1. It is cumbersome to manage the state of complex components with many variables.
2. Due to its limited capabilities, it leads to issues like prop drilling, which can be a bit confusing if not understood.
3. It triggers a re-render of the component impacting performance.

How to Use useState() in React Applications

So let's create an application that changes the color based on the user's input.

Using useState() involves a simple process:

• Import the useState() hook from the 'react' library.
• Define a state variable and its initial value using array destructuring.
• Then, define another state variable that takes in the color choice of the user when typed.
• Use the state variable and its corresponding setter function within the component's logic to read or update the state.

Here's what that looks like in code:

import React, { useState } from 'react';

const State = () => {
  const [text, setText] = useState('black');
  const [color, setColor] = useState('black'); // Another state to store the chosen color by the user

  const handleInputChange = (e) => {
    setText(e.target.value);
  };

  // A function is been declared
  const handleButtonClick = () => {
    setColor(text); // it updates the chosen color when the button is clicked
  };

  return (
    <div>
      <p style={{ color: color }}>
        Progressively effective resources via business metrics.
      </p>
      <br />
      <div className='inputBtn-container'>
        <input
          type='text'
          className='input'
          value={text}
          onChange={handleInputChange}
        />
        <button className='btn' onClick={handleButtonClick}>
          Change text color
        </button>
      </div>
    </div>
  );
};

export default State;

In the above code, the state variable text is set to the initial state (color) using useState(). The setText function is set to update the value of color when the button is clicked.

The second state defined is to store the color update from the user. So the text color remains unchanged until the button is clicked. Once the button is clicked, the color state updates with text value, changing text color to what the user types.

Result

Option 2: Managing State with Redux

Redux is a JavaScript library for managing states in applications. It works with React and other frameworks.

Redux helps you manage the global state of your app. It improves your app's performance as well.

Think of Redux as a traffic controller for the data in the app. It makes sure that the right information goes to the right places, so everything runs smoothly.

Pros of Using Redux in Your Application

Redux might seem complex at first, but it comes with several advantages that make learning it worthwhile:

1. Redux can be used with other front-ends frameworks not only in React applications (for example Angular.js, Vue.js, and Next.js).
2. Redux allows you to store all the states in a central store, instead of scattering states across many components. This makes it easier to understand, track, and manage the application state.
3. Many large companies use Redux to manage the state of their application.

Cons of Using Redux in Your Application

1. Using Redux can make your app more complicated, especially if you're new to it. You'll need to learn new concepts and write more code, which might take time to understand and use.
2. Redux needs more code compared to useState().
3. If your app is small or doesn't have complex state needs, using Redux may be unnecessary.
4. Debugging can be challenging in a complex Redux setup.

How to Use Redux in Your Application:

First, you'll need to install the Redux package:

Installing redux into your Code editor

The gif above shows that I ran three commands together in the terminal. This is a personal preference.

What are these commands doing:

• npm install redux installs the Redux library.
• react-redux signifies that Redux is being used in a React application. It provides integration.
• @reduxjs/toolkit simplifies Redux, especially for beginners. It offers helpful tools and abstractions that make working with Redux easier and less complex for new developers.

Next, check to make sure that Redux has been added to your dependencies. Look at your package.json file. It contains important information about the packages used in your project.

react-dependencies

Then import {configureStore} from @reduxjs/toolkit to the main.js or index.js.

Use the provider tag to wrap up the main component of our app. Provide the store as an attribute (props) to the provider. This makes the store accessible globally throughout our application.

import of the store and provider tag

Let's go over some key terms used in Redux:

Store: A "container" in our application is like a storage unit. Inside the store, we will define the reducer.

Redux operates based on the principles of a centralized store. It acts as a central store that holds the application's entire state. When any component needs access to the state or needs to be updated , it interacts with the store. The store then manages the data and propagates changes to the relevant parts of the application.

Reducer: A reducer is an object that takes two inputs: the previous state and an action. It returns the updated state based on the dispatched actions. It examines the activity and decides how to update the app's state.

Reducers in Redux control how our app reacts to user input. This flexibility makes it easy to maintain and change our code when needed. We can use the store and Provider imports to update our application.

Redux Example

So let's create an application that changes the colour based on the user's input and use Redux to manage state this time.

First, make a folder called components. Inside that folder, create a file named ChangeColor.jsx.

Initial state of the application

Here's the output:

static output

In your project directory, create a folder named features. Inside this folder, create a file called Color.js to hold the Redux logic for your application.

color.js

Next, we want to enable users to input their desired color. To do that, import the useState() hook like this:

ChangeColor.jsx

import { useState } from 'react';   // useState() hook

const ChangeColor = () => {
  const [color, setColor] = useState(''); 
  return (
    <div>
      <p>Progressively effective resources via business metrics.</p>
      <br />
      <div className='inputBtn-container'>
        <input
          type='text'
          className='input'
        />
        <button className='btn'>change color text</button>
      </div>
    </div>
  );
};

export default ChangeColor;

At the color.js. This file holds the Redux logic for your application.

// Import necessary functions from Redux Toolkit
import { createSlice } from "@reduxjs/toolkit";// Creating a slice for functionality is essential.

// Define the initial state for the slice
const initialState = "black"


// Create a slice using the createSlice function
const themeSlice = createSlice({
  name: 'theme', // Name of the slice
  initialState: { value: initialState},// Initial state for the slice
  reducers: {
    changeColor: (state, action)=>{
      state.value=action.payload // Update the color value based on the dispatched action
    },
    }
  }
})

Let's see what's going on in this code:

• createSlice is a function from the Redux Toolkit that lets developers create reducers in a clear and organized way. It simplifies splitting logic and accessing it across the application. With createSlice, changing values and understanding the code become easier.
• name is a string that defines the name of the slice. This name is used as a prefix for the generated action type strings.
• initialState is the initial state value for the slice.
• reducers are objects that take two inputs – the previous state and an action. The reducer returns the updated state based on the dispatched actions. It examines the activity and decides how to update the app's state. Reducers in Redux control how our app reacts to user input. This flexibility makes it easy to maintain and change our code when needed. We can use the store and Provider imports to update our application. Using the reducer, we can manage and update the application in a structured way. It helps us track changes according to our desired logic.
• state refers to the data stored and managed by the application. It holds the current values of variables, properties, or fields that determine how the application behaves and looks.
• action is a plain JavaScript object that describes an intention to change the state. It's how we communicate with the reducers to initiate state updates.

After defining the reducer logic, we can make it reusable by exporting it from the file and importing it wherever we need to manage the state. For example, in the changeColor.jsx file.

import { createSlice } from "@reduxjs/toolkit";

const initialState="black"
export const themeSlice = createSlice({
  name: 'theme',
  initialState: { value: initialState},
  reducers: {
    changeColor: (state, action)=>{
      state.value=action.payload
    }
  }
})
// Export the reducer function
export const { changeColor } = themeSlice.actions
export default themeSlice.reducer

Let's see what's going on in this code:

• We will import the useSelector hook from react-redux to get data from the Redux store. This helps us get the current color value from the state.
• We will import the useDispatch hook from react-redux to send actions to the Redux store. This allows us to update the color value in the state.
• And finally import the Color.js file, which contains the Redux logic, including the reducer and the action for changing the color.

Then:

1. We get the current color from the Redux store using the useSelector hook.
2. We render an input element where users can type their desired color.
3. We define an event handler to handle changes to the input value. When the user types a color in the input, this event handler will be called.
4. When the user clicks the "Change Color" button, the event handler dispatches an action to the Redux store with the updated color value.

With these changes, the ChangeColor component now uses Redux to manage the state. Users can change the color of the displayed text by typing their desired color in the input field and clicking the "Change text color" button.

import { useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { changeColor } from '../features/Color';

const ChangeColor = () => {
  // State to hold the selected color
  const [color, setColor] = useState('');

  // Accessing the dispatch function from react-redux
  const dispatch = useDispatch();

  // Accessing the theme color value from the Redux store
  const themeColor = useSelector((state) => state.theme.value);

  // Event handler for the input change
  const handleColorChange = (e) => {
    setColor(e.target.value);
  };

  // Event handler for the button click
  const handleButtonClick = () => {
    // Dispatching the changeColor action with the selected color
    dispatch(changeColor(color));
  };

  return (
    <div style={{ color: themeColor }}>
      <p>Progressively effective resources via business metrics.</p>
      <br />
      <div className='inputBtn-container'>
        <input type='text' className='input' onChange={handleColorChange} />
        <button className='btn' onClick={handleButtonClick}>
          Change text color
        </button>
      </div>
    </div>
  );
};

export default ChangeColor;

Here's the output:

Modified State using Redux

Conclusion

The article covers two state management solutions: the useState() hook for small to medium apps and Redux for larger ones.

When choosing which to use, consider factors like app complexity, team size, and performance needs. Understanding both approaches will help you make the right choice.

You can read the Redux documentation to learn more.

If you found this article helpful, share it with others who may also find it interesting.

You can also stay updated on my latest projects by following me on Twitter and LinkedIn.

Thank you for reading💖.

While the online tutorials and guides provided helpful information, I needed more clarity to really understand Redux.

But with persistence and practice, I eventually gained a better understanding of Redux's key concepts and successfully implemented them in my projects.

In this article, I will explain Redux in the simplest possible way. As someone who initially struggled with understanding Redux, I know how frustrating it can be to learn a new concept. But I hope this article will help make the concepts of Redux more accessible to beginner learners.

We will also delve into Redux Toolkit, a collection of tools that simplify using Redux. These tools help make Redux less daunting and easier to use.

What is Redux?

Redux is a state management library that allows you to manage the state of your JavaScript applications more efficiently and predictably.

Imagine you are building a house and need to keep track of all the materials you use and how much money you spend. Instead of keeping track of everything in your head or on a piece of paper, you could use a ledger to keep track of every transaction. Redux works similarly by keeping track of your application's state in a single place called the "store."

Let's say you're building an e-commerce site. You may need to keep track of the items in a user's cart, their payment information, and their shipping details.

Instead of passing this information from component to component using props, Redux allows you to store them in one central location where they can be easily accessed and updated. This makes it easier to manage complex states and keep your application organized.

It's important to note that Redux is not limited to React and you can use it with other frameworks or even vanilla JavaScript.

Why Should I Use Redux?

Redux can help simplify the state management process, especially when dealing with complex and interconnected components. Here are some reasons why you might want to use Redux in your application:

1. Centralized state management: With Redux, you can maintain the state of your entire application in a single store, making it easier to manage and access data across components.
2. Predictable state updates: Redux has a clear flow of data, which means changes to the state can only happen when you create an action and send it through Redux. This makes it easy to understand how your application's data will change in response to user actions.
3. Easier debugging: With Redux DevTools, you have a clear record of all the changes to your application's state. This makes locating and fixing issues in your code easier, saving you time and effort in the debugging process.
4. Better performance: By minimizing the number of state updates and reducing the need for prop drilling, Redux helps improve your application's performance.

How Does Redux Work?

As previously mentioned, Redux enables you to maintain a single centralized store that manages the state of your entire application. All components in your application can access this store and update or retrieve data from it as needed.

The key components that enable this centralized approach to state management are:

1. Store
2. Actions
3. Dispatch
4. Reducers

Let’s explore the role of each one:

The Store

The Redux store is like a giant container that holds all the data for your application.

Think of the store as a box with different compartments for different data types. You can store any data you want in these compartments, and it can hold various kinds of data, such as strings, numbers, arrays, objects, and even functions.

Also, the store is the single source of truth for your application's state. This means that any component in your application can access it to retrieve and update data.

Actions

An action is an object that describes what changes need to be made to the state of your application. It sends data from your application to the Redux store and serves as the only way to update the store.

An action must have a "type" property describing the action being performed. This "type" property is typically defined as a string constant to ensure consistency and avoid typos.

In addition to the "type" property, an action can have a "payload" property. The "payload" property represents the data that provides additional information about the action being performed. For example, if an action type is ADD_TASK, the payload might be an object containing a new task item's "id", "text", and "completed status".

Here's an example of an action:

{
  type: 'ADD_TASK',
  payload: {
    id: 1,
    text: 'Buy groceries',
    completed: false
  }
}

Note that to create actions, we use action creators. Action creators are functions that create and return action objects.

Here is an example of an action creator that takes in a task's text and returns an action object to add the task to the Redux store:

function addTask(taskText) {
  return {
    type: 'ADD_TASK',
    payload: {
      id: 1,
      text: taskText,
      completed: false
    }
  }
}

An appropriate analogy for actions and action creators would be a chef using a recipe. The recipe outlines the required ingredients and instructions to prepare a dish, similar to how an action in Redux specifies the needed details to modify the state of an application.

In this scenario, the chef represents the action creator, who follows the recipe to create the dish, similar to how an action creator creates an action based on predefined properties.

Dispatch

In Redux, dispatch is a function provided by the store that allows you to send an action to update the state of your application. When you call dispatch, the store runs an action through all of the available reducers, which in turn update the state accordingly.

You can think of dispatch as a mail carrier who delivers mail to different departments in a large company. Just like how the mail carrier delivers mail to different departments, dispatch delivers actions to various reducers in your Redux store. Each reducer is like a department in the company that processes the mail and updates its own part of the company's data.

Reducers

In Redux, a reducer is a function that takes in the current state of an application and an action as arguments, and returns a new state based on the action.

Here's an example of a simple reducer:

const initialState = {
  count: 0
};

function counterReducer(state = initialState, action) {
  switch(action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
}

In the above code, we have a simple reducer called "counterReducer" that manages the state of a count variable. It takes in two arguments: state and action. The state argument represents the current state of your application, while the action argument represents the action dispatched to modify the state.

The reducer then uses a switch statement to check the "type" of the action, and based on that type, it updates the state accordingly.

For example, if the action type is "INCREMENT", the reducer returns a new state object with the count incremented by 1. Also, if the action type is "DECREMENT", the reducer returns a new state object with the count decremented by 1.

A perfect analogy for a reducer would be a kitchen blender. Just like a blender takes in different ingredients, blends them, and produces a smooth mixture, a reducer takes in the current state of an application and an action, processes them together, and produces a new state.

Example Project – Real App Implementation

Now that you understand the basics of Redux and how it works, let's create a simple real-world project. For this example, we'll create a basic ToDo List application where you can add and delete tasks.

Step 1: How to set up the project

Create a new React project by running the following command in your terminal. Replace "your-project-name" with the name of your project.

npm create vite@latest your-project-name -- --template react

cd your-project-name

npm install

The above command sequence will create a new React project using the Vite build tool and install all necessary dependencies.

Step 2: How to install Redux

Redux requires a few dependencies for its operations, namely:

• Redux: The core library enables the redux architecture.
• React Redux: Simplifies connecting your React components to the Redux store.
• Redux Thunk: Allows you to write asynchronous logic in your Redux actions.
• Redux DevTools Extension: Connects your Redux application to Redux DevTools

You can install them using npm, as shown below:

npm install \

redux \

react-redux \

redux-thunk \

redux-devtools-extension

Step 3: How to set up reducers

Now let's create the reducer for our application.

In the src directory, create a new folder called reducers, and inside that folder, create two new files: index.js and taskReducer.js.

The index.js file represents the root reducer, which combines all the individual reducers in the application. In contrast, the taskReducer.js file is one of the individual reducers that will be combined in the root reducer.

import taskReducer from "./taskReducer";
import { combineReducers } from "redux";

const rootReducer = combineReducers({
  tasks: taskReducer,
});

export default rootReducer;

In the above index.js file, we use the combineReducers function to combine all the individual reducers into a single root reducer. In this case, we only have one reducer (taskReducer), so we pass it in as an argument to combineReducers.

The resulting combined reducer is then exported so that other files in the application can import and use it to create the store.

Here's the code for taskReducer:

const initialState = {
  tasks: []
};

const taskReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'ADD_TASK':
      return {
        ...state,
        tasks: [...state.tasks, action.payload]
      };
    case 'DELETE_TASK':
      return {
        ...state,
        tasks: state.tasks.filter(task => task.id !== action.payload)
      };
    default:
      return state;
  }
};

export default rootReducer;

Inside the above taskReducer.js file, we define a reducer function that takes two arguments: state and action. The state argument represents the current state of the application, while the action argument represents the action being dispatched to update the state.

The switch statement inside the reducer handles different cases based on the "type" of the action. For example, if the action type is ADD_TASK, the reducer returns a new state object with a new task added to the tasks array. And if the action type is DELETE_TASK, the reducer returns a new state object with the current tasks filtered to remove the task with the specified id.

Step 4: How to create the Redux store

Now that we have our basic setup ready, let's create a new file called store.js in the src directory. This is where you'll define your Redux store:

import { createStore, applyMiddleware } from "redux";
import thunk from "redux-thunk";
import { composeWithDevTools } from "redux-devtools-extension";

import taskReducer from "./reducers/taskReducer";

const store = createStore(
  taskReducer,
  composeWithDevTools(applyMiddleware(thunk))
);

export default store;

The code above sets up a Redux store by creating a new instance of the store using the createStore function. Then, the rootReducer – which combines all the application's reducers into a single reducer – is passed as an argument to createStore.

In addition, the code also uses two other libraries: redux-thunk and redux-devtools-extension.

The redux-thunk library allows you to write asynchronous actions, while the redux-devtools-extension library enables you to use the Redux DevTools browser extension to debug and inspect the state and actions in the store.

Finally, we export the store so we can use it in our application. We use the composeWithDevTools function to enhance the store with the ability to use the Redux DevTools extension, and the applyMiddleware function to apply the thunk middleware to the store."

Step 5: How to connect the Redux Store to the application

To connect the Redux store to the ToDo application, we need to use the Provider component from the react-redux library.

First, we import the Provider function and the Redux store we created into our main.jsx. Then, we wrap our App component with the Provider function and pass the store as a prop. This makes the Redux store available to all the components inside the App.

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "./index.css";

import { Provider } from "react-redux";
import store from "./store";

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);

Step 6: How to use Redux DevTools

Once you've set up the Redux <Provider> in your application, you can start using the Redux DevTools extension. To get started with it, you'll need to download the Redux DevTools Extension for your browser.

After installation, the DevTools will add a new tab to your browser's Developer Tools specifically for Redux.

Clicking on the "State" tab within the Redux DevTools will show you the entire state of your Redux store and any actions that have been dispatched and their payloads.

This can be incredibly useful when debugging your application, as you can inspect the state and actions in real-time.

Step 7: How to set up Redux Actions

Now that we have everything set up, let's create our actions. As I mentioned before, actions represent something that happened in the application. For example, when a user adds a new task, it triggers an "add task" action. Similarly, when a user deletes a task, it triggers a "delete task" action.

To create the actions, create a new folder called "actions" in the src directory and then create a new file called index.js. This file will contain all of the action creators for our application.

export const addTodo = (text) => {
  return {
    type: "ADD_TASK",
    payload: {
      id: new Date().getTime(),
      text: text,
    },
  };
};

export const deleteTodo = (id) => {
  return {
    type: "DELETE_TASK",
    payload: id,
  };
};

The above code exports two action creators: addTodo and deleteTodo. These functions return an object with a type property that describes the action that has occurred.

In the case of addTodo, the type property is set to "ADD_TASK", indicating that a new task has been added. The payload property contains an object with the new task's id and text values. The id is generated using the new Date().getTime() method creates a unique identifier based on the current timestamp.

In the case of deleteTodo, the type property is set to "DELETE_TASK", indicating that a task has been deleted. The payload property contains the id of the task to be deleted.

These action creators can be dispatched to the Redux store using the dispatch() method, which will trigger the corresponding reducer function to update the application state accordingly.

Step 8: How to dispatch actions

Now that we have created the necessary actions, we can move on to creating the components that will dispatch these actions.

Let's create a new folder named "components" inside the src directory. Inside this folder, we will create two new files: Task.jsx and TaskList.jsx.

The Task.jsx component will be responsible for adding tasks. But before we proceed, we need to import the following into the file:

• addTodo action: To add new tasks to the state.
• useDispatch hook: To dispatch the addTodo action.
• useRef: Allows us to obtain a reference to HTML elements.

import { useRef } from "react";
import { useDispatch } from "react-redux";
import { addTodo } from "../actions";

Once we have imported these necessary components, we can proceed to write code for Task.jsx.

const Task = () => {
  const dispatch = useDispatch();
  const inputRef = useRef(null);

  function addNewTask() {
    const task = inputRef.current.value.trim();
    if (task !== "") {
      dispatch(addTodo(task));
      inputRef.current.value = "";
    }
  }

  return (
    <div className="task-component">
      <div className="add-task">
        <input
          type="text"
          placeholder="Add task here..."
          ref={inputRef}
          className="taskInput"
        />
        <button onClick={addNewTask}>Add task</button>
      </div>
    </div>
  );
};

export default Task;

In the code above, we created a component consisting of an input field and a button. When a user clicks on the "Add task" button, the addNewTask function is executed. This function uses the useRef hook to obtain the input field's value, removes any leading or trailing whitespaces, and then dispatches the addTodo action with the new task as the payload.

Now, let's move on to the TaskList.jsx component, responsible for rendering the list of tasks and handling task deletions. To achieve this, we need to import the following:

• The useSelector hook provides access to the state from the Redux store.
• The deleteTodo action, is responsible for removing a task from the list of tasks in the Redux store.

import { useSelector, useDispatch } from "react-redux";
import { deleteTodo } from "../actions";

We will now write code for TaskList.jsx that maps over the tasks array and renders each task:

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { deleteTodo } from '../actions';

const TaskList = () => {
  const tasks = useSelector((state) => state.tasks);
  const dispatch = useDispatch();

  const handleDelete = (id) => {
    dispatch(deleteTodo(id));
  };

  return (
    <div className="tasklist">
      <div className="display-tasks">
        <h3>Your tasks:</h3>
        <ul className="tasks">
          {tasks.map((task) => (
            <li className="task" key={task.id}>
              {task.text}
              <button
                className="delete-btn"
                onClick={() => handleDelete(task.id)}
              >
                delete
              </button>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
};

export default TaskList;

Here, the component loops over each task in the tasks array and displays text and a delete button. When the user clicks the delete button, the handleDelete function is called, dispatching the deleteTodo action with the task's id as the payload.

Finally, import the components into your App.jsx file and render them.

import Task from "./components/Task";
import TaskList from "./components/TaskList";

function App() {
  return (
    <div className="App">
      <Task />
      <TaskList />
    </div>
  );
}

export default App;

Step 9: Styling

For styling, copy the contents of this gist and paste it into your index.css file. The focus of this guide is only on functionality and not on styling. Therefore, only basic styles were included to ensure the application looked presentable.

Final Result

After implementing everything, the final result of our ToDo List application should look something like this:

As shown above, we can add tasks by entering texts in the input field and clicking the "Add task" button. We can also delete tasks by clicking the "delete" button next to each task.

The state and actions of the application can also be easily tracked and inspected using Redux DevTools. This feature helps debug and understand how the app works under the hood.

With that, you now have a fully functional ToDo application powered by Redux! The source code for the app is available on this GitHub repository.

Finally, it's important to note that an application's state is stored in memory when using Redux. Therefore, the state will be lost if a user refreshes the page or navigates away from the app.

So, to keep information even after a user leaves or closes the page, you need to store that information somewhere else outside of the app's memory. Various techniques, such as local or server-side storage, can be used to accomplish this.

Congratulations! You now have a good grasp of how to integrate Redux into your React applications. In the next section, we will explore Redux Toolkit and discover how it can simplify the process of writing Redux code with less effort.

How to Use Redux Toolkit

Writing Redux code can become complex and verbose, particularly as the size of an application grows. As the number of reducers and actions increase, it can become challenging to manage the different pieces and keep track of everything.

Fortunately, Redux Toolkit provides a solution to this problem. It gives a more streamlined and efficient way to manage the state of your application by abstracting away some of the more complex and repetitive aspects of Redux, such as creating reducers and actions.

Advantages of Redux Toolkit

Redux Toolkit provides several advantages over traditional Redux:

• It is easier to set up and requires fewer dependencies.
• Reduces boilerplate code by allowing the creation of a single file known as "slice" that combines actions and reducers.
• Provides sensible defaults for commonly used features, such as Redux Thunk and Redux DevTools. This means that you don't have to spend time configuring these features yourself, as they are already built into Redux Toolkit.
• It uses the immer library under the hood, which enables direct state mutation and eliminates the need for manually copying the state {...state} with every reducer.

In the next sections, we will explore how to use Redux Toolkit to simplify the Redux code for the ToDo application we built earlier.

How to set up Redux Toolkit

To use Redux Toolkit in your React application, you need to install two dependencies: @reduxjs/toolkit and react-redux.

The @reduxjs/toolkit package provides the necessary tools to simplify Redux development, while react-redux is needed to connect your Redux store to your React components.

npm install @reduxjs/toolkit react-redux

How to create a slice

Once you have installed the needed dependencies, create a new "slice" using the createSlice function. A slice is a portion of the Redux store that is responsible for managing a specific piece of state.

Think of the Redux store as a cake, where each slice represents a specific piece of data in the store. By creating a slice, you can define the behaviour of the state in response to particular actions using reducer functions.

To create a slice to manage our ToDo application, create a new file named src/features/todo/todoSlice.js and add the following code.

import { createSlice } from "@reduxjs/toolkit";

const initialState = {
  tasks: [],
};

const todoSlice = createSlice({
  name: "todo",
  initialState,
  reducers: {
    addTodo: (state, action) => {
      state.tasks.push({ id: Date.now(), text: action.payload });
    },
    deleteTodo: (state, action) => {
      state.tasks = state.tasks.filter((task) => task.id !== action.payload);
    },
  },
});

export const { addTodo, deleteTodo } = todoSlice.actions;

export default todoSlice.reducer;

The above code defines a slice named todoSlice, with an initialState object that contains an empty array of tasks.

The reducers object defines two reducer functions: addTask and deleteTask. addTask pushes a new task object into the tasks array, and deleteTask removes a task from the tasks array based on its id property.

The createSlice function automatically generates action creators and action types based on the names of the reducer functions you provide. So you don't have to define the action creators yourself manually.

The export statement exports the generated action creators, which can be used in other parts of your app to dispatch actions to the slice.

And finally, the todoSlice.reducer function handles all actions automatically generated based on the reducer objects provided to the createSlice function. By exporting it as the default, you can combine it with other reducers in your application to create a complete Redux store.

How to set up Redux Store

Creating a Redux store is much simpler with Redux Toolkit.

The most basic way to create a store is to use the configureStore() function, which automatically generates a root reducer for you by combining all the reducers defined in your application.

To create a store for the application, add a file named src/store.js and add the following code:

import { configureStore } from "@reduxjs/toolkit";
import todoReducer from "./features/todo/todoSlice";

const store = configureStore({
  reducer: {
    todo: todoReducer,
  },
});

export default store;

In this example, we first import the configureStore function from the @reduxjs/toolkit package, and the todoReducer function from a separate file.

Then, we create a store object by calling configureStore and passing it an object with a reducer property. The reducer property is an object that maps reducer slice names to their corresponding reducer functions. In this case, we have one reducer slice called todo, and its corresponding reducer function is todoReducer.

Finally, we export the store object so that it can be imported and used in other parts of the application.

How to provide the Redux store to React

To make your Redux store available to the React components in your application, import the Provider component from the react-redux library and wrap your root component (usually <App>) with it.

The Provider component takes in the store as a prop and passes it down to all the child components that need access to it.

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";
import "./index.css";

import store from "./store.js";
import { Provider } from "react-redux";

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);

Create components

You can now create React components such as Task.jsx and TaskList.jsx that use the useSelector hook to access the current state from the store. Similarly, you can use the useDispatch hook to dispatch actions to update the store, just as you did in plain Redux.

You should now have the same app as before with a few updates from Redux Toolkit and a lot less code to maintain.

Conclusion

If you've followed along with this tutorial, you should now have a solid understanding of Redux, both the traditional approach and the simplified version using Redux Toolkit.

I hope you found this article helpful and informative. I know it was a lot of material to cover, but I hope it serves as a comprehensive resource for beginners and intermediate learners seeking to learn Redux.

If you want to experiment with the code we've covered in this article, you can access it in the GitHub repository provided. Feel free to use it as a starting point for your own applications or as a reference as you continue to learn and explore the world of Redux.

Thank you for reading, and happy coding!

🔐 Here's What We'll Cover

• You'll see how easy it is to set up your first unit tests in React.
• You'll improve your general React knowledge.
• You'll get the hang of why Test Driven Development (TDD) is helpful for your coding workflow.

📝 Prerequisites

• You should be familiar with the basic React workflow structure (including functional components and hooks).
• You should have a basic knowledge of Redux (I'm using Redux Toolkit for this guide).
• You don't need any prior knowledge about testing.
• I'm using the npm installation approach, not the yarn one.

🎯 The Objective

While learning advanced concepts of React, you'll probably stumble across the topic of testing. Being able to work with automatic tests is also quite handy for any upcoming frontend developers.

However, as I myself was learning React, I had a hard time finding information about how to implement tests for libraries like Redux (even though it's a library I work with all the time).

Beyond that, I found that doing any component testing in React is basically unfeasible when you don't know how to work with the Redux library.

So I took some time to read the Redux documentation and went back and forth with it a bit. Then I decided to write a practical starter guide for unit testing in React, including Redux, to share what I learned.

Since I would like to take a modern approach, I'm also going to use the Redux Toolkit. We'll cover the Redux implementation in this guide.

What we'll cover:

To start off, I will provide some general information about tests before I directly go into creating the first general unit tests.

Next I'll give a quick overview of how to implement some Redux Toolkit logic.

Then we will work on some unit tests within an application which uses Redux Toolkit. For this step we will adjust our previously created tests to the new Redux environment.

This is a step-by-step guide. If you are new to tests, I recommend following this guide in order from top to bottom.

I have also created a public GitHub repository for this guide with some commentary. You can use that if you want to look something up without scrolling through this guide in its full length again.

Table of Contents

1. What Different Kinds of Tests Are There?
2. How to Set Up Your React Testing Environment
3. Check Out Your Created React Application
4. How to Create Your First Unit Test
5. How to Create a Failing Test on Purpose
6. How to Create Some Additional Tests
7. How to Perform Testing with the React Redux Toolkit
8. Outlook for Advanced Testing

📋 What Different Kinds of Tests Are There?

This quick guide won't provide you with detailed theoretical knowledge about all the different kinds of testing out there. At this point, you should just understand that there are generally three kinds of tests:

• Unit Tests
• Integration Tests
• End-To-End Tests

To put it in simple words: You can see these three types of tests as generally increasing in their complexity.

While unit tests cover single functions and components, integration tests typically focus on multiple functions and their connections to each other. End-to-end tests are even more complex and give insights about multiple function and component structures.

There are other test concepts, but these three are the most important ones for web developers, for example.

Again, this is really put in simple words. But in this case it's sufficient to know that unit tests are basically the least complex tests out of these three.

It's also quite easy to work with unit tests as soon as you have a basic understanding of how testing in general works.

I would also like to quickly emphasize that there are mainly two ways of testing your application.

• Manual Testing
• Automatic Testing

Manual Testing is pretty much what you probably already do for all of your application which you create. When manually testing your application, you basically start your React application with npm run start and actually click on buttons to check if the corresponding function works.

Automatic Tests, on the other hand, are pretty much functions you create which automatically check your application to see if the respective steps work that you defined within these tests. This automatic kind of testing is extremely important for larger projects.

With this automatic approach, it's also way easier to scale your tests. In the end, you have a lot of tests which automatically test your whole application in a relatively short amount of time. These test can help you spot any potential errors which might have occurred during development. This would take much more time if you were to go back constantly to manually test your application.

Being able to work with automatic tests is also typically a big plus for your résumé as a frontend developer.

🔧 How to Set Up Your React Testing Environment

In order to get a practical start, we are going to directly dive into our React application.

You will see that the setup of a testing environment is relatively easy in React – or, to be more precise, React does it all for you during the regular install setup.

Therefore, I'm creating a React application with the following line:

npx create-react-app <name of your application>

After this step, we need everything that should be added for using Redux in our React application:

• React Redux: npm install react-redux (provides some mandatory hooks, for example)
• React Redux Toolkit: npm install @reduxjs/toolkit (provides logic for creating a store or slices, for example)

It's worth mentioning that there also is the Redux core (npm install redux). But this is already part of the React Redux Toolkit installation, so we don't have to install it here too.

If you wanted to use React without the React Redux Toolkit, then you would have to separately reach out to the Redux core installation.

You can also create a new React application from scratch with npx create-react-app my-app --template redux which includes the React Redux Toolkit, the React core, React Redux, as well as a template from the React Redux Toolkit.

Choose this approach if you don't have any existing React applications, since it's probably more convenient.

Under the hood, you now have an application that uses the React Testing library combined with Jest (a testing framework). Together, they have pretty much everything that you will need for testing your React application.

You don't have to install anything else for this purpose. These tools come out of the box with a standard React installation.

🔎 Check Out Your Created React Application

As you go into your newly created React application, you will find the folder and file structure you are likely familiar with. Besides others, there is the App.js file, which is created like this:

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

Within the src folder, you also have the file App.test.js. This file is actually a first test that came out of the box with React installation. This file is structured like this:

import { render, screen } from '@testing-library/react';
import App from './App';

test('renders learn react link', () => {
  render(<App />);
  const linkElement = screen.getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});

Even without fully understanding what render or screen is, for example, we can see that something is going on with our App component in there. In fact, this is a unit test that is focusing on a specific part of the App component.

While this first template for a test is a handy representation of what a test looks like, I would like to create a test file from scratch.

Generally speaking, tests are separated into different test suites. These test suites are typically a group of tests that focus on the same component, for example. Tests within the same test suite basically have the same superordinate topic.

To check this, try to enter npm run test in your terminal when you are within your React application.

It could say something like "There are no new tests or changes since the last commit" – in this case, just enter a in the terminal to run all tests regardless.

In the end, you should be able to see this within the terminal:

Result of npm run test

At the top, you can see that the App.test.js file passed. Basically, all tests within this file were successful.

Below that, you can see renders learn react link: This is the description for this particular test, which we can define individually. We will get back to this later.

Further down, we can finally see the test suites and tests. As you can see, we have one test suite and one test. To be more precise, we have one test suite that includes this one test.

Later on, you will recognize that we will use like 1-3 test suites while there will be around 5+ tests, for example. Again, test suites basically provide a structure that groups single tests together.

The stuff with the snapshots is not important for your specific case.

Snapshots are an advanced concept for testing. So a reference snapshot (like an image that was taken) is being compared with the version after some actions took place. This can help to check whether the UI stays the same after some actions or if some changes happened all of a sudden.

I won't focus on testing with snapshots in this article. This is a topic that you might want to look up after understanding some unit testing basics.

🔨 How to Create Your First Unit Test

Now that we've looked at a unit test, lets dive into the first test which we'll build from scratch on our own.

For that, I would like to create a new folder called __tests__. This is common when you are working with tests or checking out other applications.

I'm also dragging the already-available App.test.js file into this folder. This doesn't change anything about the result.

Our folder structure now looks like this:

general folder structure with __tests__

Within __tests__, we create the file myFirstTesting.test.js. We need this file structure of <test name>.test.js. You can also create a test file with <test name>.spec.js – both approaches will work the same.

Our first step is to import the App.js component: import App from "../App";.

To create our first test, we have to make use of the test() function. You could also use it(). Both will achieve the same result.

The first parameter of this function has to be a string, which describes what we are going to test (remember the stuff with "renders learn react link" within the test file we viewed?). This is going to help you have a more precise overview after running all the tests.

In this case, I will use the description "renders logo in App component". The second parameter is another function for which we are using an anonymous arrow function. Our myFirstTesting.test.js file now looks like this:

import App from "../App";

test("renders logo in App component", () => {

})

Even though there is not much going on, let's try entering npm run test again. We will find the following result in our terminal:

Therefore, we now have two test files, resulting in two test suites and two tests.

Now we would actually like to test something. Since we added the description "renders logo in App component", we are going to test exactly that.

In order to do that, we need the render() function, which we'll use whenever we actually want to render a component from our application.

In order to add the render() function, we have to import it from the React Testing library, which is already part of our React application without any other installations.

While we're at this step of importing, let's also import screen (also part of the React Testing library). It provides access to different functions that will look through the current screen after something gets rendered and find specific elements, for example.

After adding these two imports, our myFirstTesting.test.js file now looks like this:

import App from "../App";
import { render, screen } from "@testing-library/react";

test("renders logo in App component", () => {

})

Now that we have all that, let's actually start working on our test.

First of all, we need to render our component. Remember that tests are self-contained and don't know that we have an App.js with the corresponding content in our React application. We have to individually tell the specific test that a component exists by rendering it with render() at the top of the test. This is going to look like this: render(<App />);.

Now that we have rendered the App.js component in this test, we should try to check if a specific content part can be found by the test. This way, we can actually test if App.js was rendered like it was supposed to be.

Assuming something went wrong, we would not be able to find the React logo, for example, which is currently part of the App.js component.

So we will try to find this logo, which is an img element. To do this, we can make use of the getByAltText() function that finds an element by its specific alt attribute, which is commonly utilized for images. We have access to this function with screen that we imported earlier.

We now have this expression: screen.getByAltText("logo"). So the test looks at the screen where we rendered the App.js component beforehand, and then gets an element, which has an alt attribute of "logo". We will connect all this to a variable.

Our test file now looks like this:

import App from "../App";
import { render, screen } from "@testing-library/react";

test("renders logo in App component", () => {
  render(<App />);
  const image = screen.getByAltText("logo");
})

There are a bunch of different functions like getByAltText() that you can use to look for elements with a specific text content, a specific role like a button, or even with a test id that you can add to the actual element.

You also have the opportunity to look for multiple elements. Besides that, you don't have to use a string as parameter. A regular expression with /logo/i is also feasible, for example. We will use different ways to find elements throughout this starter guide.

For the last step, we have to utilize expect(), which we use to see what behavior we can expect. In this case, we expect that our image variable is part of the component and therefore exists.

For this approach, our file would look like this:

import App from "../App";
import { render, screen } from "@testing-library/react";

test("renders logo in App component", () => {
  render(<App />);
  const image = screen.getByAltText("logo");
  expect(image).toBeInTheDocument();
})

❗ How to Create a Failing Test on Purpose

If we now run our tests with npm run test, everything will pass. Now, let's try to reverse this logic so that we actually create a failing test. This way, we can check if this test actually has some impact or not.

To do this, we can go into our App.js file and change the alt attribute for the logo image. If you change it to alt="loo", the test will fail and it'll give you some information.

In our case, though, I would like to change something on the test itself to make it fail and show you another expression that is handy to know. Instead of expect(image).toBeInTheDocument(); we can also type expect(image).not.toBeInTheDocument();. So here we added a not. This basically reversed the logic, and now the test expects that no such image element exists.

If we now try to run the test, we will find the following error message in our terminal:

The error message we get

You can see that the test expected that there was no such element as image. However, it found something and therefore answered with an error message.

You don't have to make all your tests purposely fail to check if they work or not. I just wanted to show you what an actual failing test would look like.

✏️ How to Create Some Additional Tests

Now we have finished with our first test and have some basic knowledge about what to expect when working with unit tests. Next, we will check out some other test examples.

In order to create a more realistic scenario, I will add one additional component, which we'll insert into the App.js component.

For this step, first we create a folder called components in our src folder. This is not a must, but it is common to structure your files like that.

Within the components folder, we create List.js. Our folder structure now looks like this:

current folder structure

Now, let's try to follow more of a test driven development (TDD) workflow, which is quite modern. I'm not necessarily sayint that this is always recommended. But a TDD approach is considered best practice by more and more people nowadays.

Of course, in this tutorial we'lre "only" talking about unit tests and not integration or end-to-end tests, but the general TDD workflow is similar for all three test categories.

So using this test driven development approach, we basically add tests and work on our application simultaneously.

To be more precise, we even create tests for single components and function parts before you even implement this tested logic in your application.

So there is a lot of going back and forth instead of creating all the tests at once at the end.

How to Start the Setup for List.js

In our example, we have added the List.js component. Within this component, I would like to add a list with a button. When a user clicks on the button, it adds something to the list (an object with multiple keys and values).

In order to have some sort of frame, I will first add some div elements and similar stuff to our List.js component before we dive into the actual logic.

The List.js component now looks like this:

const List = () => {
  return (
    <div
      style={{ marginLeft: "auto", marginTop: "500px", marginBottom: "500px" }}
    >
      <h1>This is a list</h1>
      <ul style={{ listStyleType: "none" }}>
        <li>This is the first list entry</li>
      </ul>
      <button>This button can add a new entry to the list</button>
    </div>
  );
};

export default List;

I also added the List.js component as a child to App.js (below all the other stuff in App.js) so it will be visible without changing anything else.

The result looks like this:

How it looks

This won't win you any style competitions but it's sufficient for our case.

Setup for the test for List.js

Since we want to test while we are working on our component, I will now jump directly to the testing part even if nothing really happened in our List.js component in terms of click functions, for example.

We could create a new test file, but I would like to show you a new function we can use for our test suites specifically. This function is called describe() and can be handy for further structuring our tests.

To use describe(), we jump to myFirstTesting.test.js within __tests__. Right now, this file basically serves as one test suite for the test we specifically created for the App.js component. But I would like to have two test suites within this test file: one for the App.js tests and one for the List.js tests.

For this step, I'm using the describe() function, which basically works like the test() function in terms of parameters.

The first parameter will be a string, describing the respective test suite. The second parameter is a function, which then includes our test() functions with their stuff.

It will look like this in our case:

import App from "../App";
import { render, screen } from "@testing-library/react";

describe("App.js component", () => {
  test("renders logo in App component", () => {
    render(<App />);
    const image = screen.getByAltText("logo");
    expect(image).toBeInTheDocument();
  });
});

describe("List.js component", () => {
  test("example", () => {});
});

Before we jump into this new test, I would actually like to add something for the App.js testing. Since we have this describe() block, we could just add a new test() function – and this is what I'm going to do.

See the following newly added test described with "renders List.js component in App.js":

import App from "../App";
import { render, screen } from "@testing-library/react";

describe("App.js component", () => {
  test("renders logo in App component", () => {
    render(<App />);
    const image = screen.getByAltText("logo");
    expect(image).toBeInTheDocument();
  });

   test("renders List.js component in App.js", () => {
    render(<App />);
    const textInListJS = screen.getByText(/This is a list/i);
    expect(textInListJS).toBeInTheDocument();
  });
});

describe("List.js component", () => {
  test("example", () => {});
});

So I'm rendering the App.js component and looking for text via a regular expression, which is part of the List.js component. This test can basically be understood as a render test for List.js. If List.js had not been able to be rendered within App.js, this test would not pass.

If you are confused that this works without separately using render() on the List.js component, remember that List.js is part of App.js and everything inside App.js will be rendered under typical conditions. If you tried to look for a text phrase that doesn't exist in List.js, this new test would fail. Right now, in our case, it passes.

I would also like to emphasize that you can have multiple expect() functions within the same test. Therefore, we also could have structured this new test like this:

import App from "../App";
import { render, screen } from "@testing-library/react";

describe("App.js component", () => {
  test("renders logo in App component", () => {
    render(<App />);
    const image = screen.getByAltText("logo");
    const textInListJS = screen.getByText(/This is a list/i);

    expect(image).toBeInTheDocument();
    expect(textInListJS).toBeInTheDocument();
  });
});

describe("List.js component", () => {
  test("example", () => {});
});

This would also work perfectly fine in our case. And this can be handy in situations where you test for some small elements which are directly connected to each other and have the same requirements to be rendered.

But keep in mind that in our case, we should have adjusted the description for this test. That's because "renders logo in App component" is not correct anymore if we are testing more than that in this test. So let's head back to the structure with two separate tests for now. But have in mind that you are able to work like this.

Back to the test for List.js

Now I would like to work with the second describe() block that we created a few moments ago, where we want to work with tests specifically for the List.js component.

Since we are aiming for a test-driven development approach, we should think about what we are going to build, write a test, and then implement that logic in our component.

We want to create a simple list in our List.js component. So there will be an array, which we will go through with map().

For this approach, we will utilize the useState() hook so we have a state that can dynamically adjust (the array of list items). Our first test will be to check if the length of this array in its initial state is equal to 1.

To find the items within this state, we will make use of the getAllByTestId() method, which allows us to search for specific elements we marked with a data-testid in the frontend.

The test with the description "renders initial state of listData state" that I created is now included:

import App from "../App";
import { render, screen } from "@testing-library/react";

describe("App.js component", () => {
  test("renders logo in App component", () => {
    render(<App />);
    const image = screen.getByAltText("logo");
    const textInListJS = screen.getByText(/This is a list/i);

    expect(image).toBeInTheDocument();
    expect(textInListJS).toBeInTheDocument();
  });
});

describe("List.js component", () => {
   test("renders initial state of listData state", () => {
    render(<List />);
    const list = screen.getAllByTestId("list-item");
    expect(list.length).toEqual(1);
  });
});

Right now this test will fail, of course, because we haven't added any of this logic to the component yet.

So I adjusted the List.js component. It now looks like this:

import { useState } from "react";

const List = () => {
  const initialState = [
    {
      id: `${new Date().getSeconds()}`,
      description: "This is something",
      significance: 7,
    },
  ];
  const [listData, setListData] = useState(initialState);

  return (
    <div
      style={{ marginLeft: "auto", marginTop: "500px", marginBottom: "500px" }}
    >
      <h1>This is a list</h1>
      <ul style={{ listStyleType: "none" }}>
        {listData.map((listItem) => {
          return (
            <li key={listItem.id} data-testid="list-item">
              {listItem.description}
            </li>
          );
        })}
      </ul>
      <button>This button can add a new entry to the list</button>
    </div>
  );
};

export default List;

Newly added was the listData state array via a useState() hook as well as an initialState, which I initialized with one object at the very top. I also made use of the map() function to go through this listData to create a list.

For each <li> element, I'm adding a key and a data-testid. This data-testid is the id we need for our test to find the respective elements.

On our actual application, we can see the listItem.description for this initial state:

So by manually testing (actually looking at our application in the browser), we can see that this should work. If we now run our tests, we will also see that the test we created passed.

How to add an object to the state

Now let's test something more exciting: the logic to add a new object to this listData state. Again, we will start by working on our test first before actually implementing the required logic within the React component.

With this newly added test described by "adds a new data entry to listData after button click", our test file now looks like this:

import App from "../App";
import List from "../components/List";
import { render, screen } from "@testing-library/react";

import userEvent from "@testing-library/user-event";

describe("App.js component", () => {
  test("renders logo in App component", () => {
    render(<App />);
    const image = screen.getByAltText("logo");
    expect(image).toBeInTheDocument();
  });

  test("renders List.js component in App.js", () => {
    render(<App />);
    const textInListJS = screen.getByText(/This is a list/i);
    expect(textInListJS).toBeInTheDocument();
  });
});

describe("List.js component", () => {
  test("renders initial state of listData state", () => {
    render(<List />);
    const list = screen.getAllByTestId("list-item");
    expect(list.length).toEqual(1);
  });

  test("adds a new data entry to listData after button click", () => {
    render(<List />);
    let listItems = screen.getAllByTestId("list-item");
    const button = screen.getByRole("button", {
      name: /This button can add a new entry to the list/i,
    });

    expect(list.length).toEqual(1);
    userEvent.click(button);
    list = screen.getAllByTestId("list-item");
    expect(list.length).toEqual(2);
  });
});

At the bottom, you can see this test. Therefore, we are first rendering the List.js component before looking for all available list items we assigned a test id to. You will see exactly where we put the test id in a few moments.

We also have to look for the button that we want to test to see if clicking on it adds something to the list. We do this with getByRole() which expects a role like "button" or "table" as a first parameter, for example (there are a bunch of different roles you can target). The second parameter is optional and is an object that can receive a value for the name key.

name is pretty much the text content we have specifically for the button in this case. This optional second parameter is handy when you have multiple elements of type "button" in your component and want to get a specific button out of these.

After getting the listItems as well as the button, we start off with a first expect() to basically test the initial state. In this initial state, we expect to have only one list item.

Then, with the help of userEvent, we are going to click on the button. You could also use fireEvent for this situation (userEvent is still pretty new compared to the fireEvent approach). Both will work, and both are helpful for any action where you want to interact with specific elements. In this case, I want to simulate clicking on a button.

Tests generally follow a "arrange -> act -> assert" pattern that you can follow to structure them. Within the "arrange" part, you initialize and get all required elements. With the "act" part, you would simulate a mouse click (as in our case), for example. With "assert," you are checking if it all behaves like you expected it to.

In another case, you could simulate changing the value of an input field with fireEvent.change(inputField, { target: { value: someValueVariable } }), for example. Maybe you want to focus an input field or even drag an element - such actions can be simulated via fireEvent and userEvent.

After the button click, it again looked for all listItems since the current value of this variable would still be 1 from the previous initialization. As soon as this step is completed, it uses another expect() function to check if the length of the listItems array is now equal to 2 and not 1.

Now that we have our test logic, let's jump back to the List.js component and implement the corresponding logic:

import { useState } from "react";

const List = () => {
  const initialState = [
    {
      id: `${new Date().getSeconds()}`,
      description: "This is something",
      significance: 7,
    },
  ];
  const [listData, setListData] = useState(initialState);

  return (
    <div
      style={{ marginLeft: "auto", marginTop: "500px", marginBottom: "500px" }}
    >
      <h1>This is a list</h1>
      <ul style={{ listStyleType: "none" }}>
        {listData.map((listItem) => {
          return (
            <li key={listItem.id} data-testid="list-item">
              {listItem.description}
            </li>
          );
        })}
      </ul>
      <button
        onClick={() =>
          setListData([
            ...listData,
            { id: 999, description: "999", significance: 100 },
          ])
        }
      >
        This button can add a new entry to the list
      </button>
    </div>
  );
};

export default List;

The only part that changed is the button at the bottom of this file. So I added a function that gets invoked when clicking on this button. The function then adjusts the current state of listData which is responsible for rendering our list. I copied the current state with a spread operator and then added another hard-coded object as the new entry for this list.

Of course, there are more creative ways to fill in the values for the id, description, and significance keys.

I would also like to emphasize that you have the opportunity to create a separate function outside of the return() and access this function like this: onClick={separateFunctionToAddObjectToState} on the same button element. This would also work without having to render something additional within the test.

If we now run our test, we will see that it passes. If you try to still expect a length of 1 after clicking on the button, the test will fail like this:

error alert for length of 1

So it actually does what it is supposed to do.

🔧 Setup for Redux

After working with local states via the useState() hook, I would like to work on the same files and adjust them for Redux (or the Redux Toolkit, to be precise).

I'm not going to dive deep into what Redux actually is and what every term like action, store, or reducer means in detail – since this would be worthy of a whole new guide. If you want that, you can read this guide to Redux basics.

Instead, I will give just a quick rundown and show which files I'm adding and editing. Then I'll talk about how to handle the render() method, including the Redux store provider, which can cause a lot of frustration when testing if you don't know about it.

Overall folder structure:

current overall folder structure with the React Redux Toolkit

You can see that I added an app (for the store) as well as a features (for the slice) folder.

Updated index.js file:

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { Provider } from "react-redux";
import store from "./app/store";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);

You can see that I added a provider and wrapped it around the application so we have access to the store from anywhere.

Created store.js file:

import { configureStore } from "@reduxjs/toolkit";
import { ListSlice } from "../features/ListSlice";

const store = configureStore({
  reducer: {
    listReducers: listSlice.reducer,
  },
});

export default store;

In this file, we have created the required store for the Redux implementation.

Created ListSlice.js file in features folder:

import { createSlice } from "@reduxjs/toolkit";

export const initialState = {
  value: [
    {
      id: `${new Date().getSeconds()}`,
      description: "This is something",
      significance: 7,
    },
  ],
};

export const ListSlice = createSlice({
  name: "listReducers",
  initialState,
  reducers: {},
});

export const { } = ListSlice.actions;
export default ListSlice.reducer;

Here we have created the slice that we added to the store. Notice that I haven't added any reducer yet. This slice just contains the current corresponding state.

Updated List.js file in components folder:

import { useSelector, useDispatch } from "react-redux";

const List = () => {
  const listState = useSelector((state) => state.listReducers.value);
  const dispatch = useDispatch(); // not used right now

  return (
    <div
      style={{ marginLeft: "auto", marginTop: "500px", marginBottom: "500px" }}
    >
      <h1>This is a list</h1>
      <ul style={{ listStyleType: "none" }}>
        {listState.map((listItem) => {
          return (
            <li key={listItem.id} data-testid="list-item">
              {listItem.description}
            </li>
          );
        })}
      </ul>
      <button>This button can add a new entry to the list</button>
    </div>
  );
};

export default List;

On the frontend, we swapped the local state (using the useState hook) with the Redux state (using the useSelctor hook). You'll also see that I adjusted the button. There is no click function anymore (we will get back to that later on).

🔎 How to Perform Testing with the React Redux Toolkit

Now that we have updated and created all the necessary files for the React Redux Toolkit logic, I would like to run a quick test of all the tests we previously created.

The result is that all tests have failed:

Keep in mind that I adjusted the button in List.js, for example, so the corresponding test was expected to fail. However, not all tests should have failed.

The test environments are working in their own world. They don't know if you wrap a provider somewhere in index.js and enable Redux logic. So the tests are still trying to make the rendering work without Redux. But our application now depends on Redux to manage our main state.

This means that we have to adjust the render() function so that this function is actually aligned with the Redux logic.

A method to make this work is to introduce a helper function, which we will store in a new folder called utils. The file will be called utils-for-tests.jsx. The content will look like this:

import React from "react";
import { render } from "@testing-library/react";
import { configureStore } from "@reduxjs/toolkit";
import { Provider } from "react-redux";
// As a basic setup, import your same slice reducers
import { ListSlice } from "../features/ListSlice";

export function renderWithProviders(
  ui,
  {
    preloadedState = {},
    // Automatically create a store instance if no store was passed in
    store = configureStore({
      reducer: { listReducers: ListSlice.reducer },
      preloadedState,
    }),
    ...renderOptions
  } = {}
) {
  function Wrapper({ children }) {
    return <Provider store={store}>{children}</Provider>;
  }

  // Return an object with the store and all of RTL's query functions
  return { store, ...render(ui, { wrapper: Wrapper, ...renderOptions }) };
}

This code information can be found in the Redux documentation. You can almost copy and paste it all for your application.

But you have to adjust the slices that are used in there. Since in our application there is only the ListSlice we don't have much to add. Just import that and update the content of the configureStore() function, like we managed it in our store.js file.

This step is necessary to basically mock the entire Redux logic and put it together into one new render() function.

With that, we can import this new function into our test files (App.test.js and myFirstTesting.test.js) and then replace all render() functions with renderWithProviders(). The App.test.js file, for example, now looks like this:

import { screen } from "@testing-library/react";
import App from "../App";
import { renderWithProviders } from "../utils/utils-for-tests";

test("renders learn react link", () => {
  renderWithProviders(<App />);
  const linkElement = screen.getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});

There is not much more to do! If we now run our tests again (and comment out this one test, which is going to fail regardless because the button logic is not active anymore), it will work again.

Slice testing

Another exciting part about testing with Redux is testing the slices. If you created your application with the React Redux Toolkit template, then you will be provided with some corresponding tests.

For our case, I also want to implement a new test file where we will specifically test ListSlice.js and its corresponding Redux logic.

For this slice, we have to import the slice and the corresponding reducers we want to test. To start, I will import the slice and test if it gets initialized with the initialState.

This is actually not the TDD approach since we already manually tested this part. Netherless, I would like to implement an automatic test as well:

import ListSlice, { initialState } from "../features/ListSlice";

describe("tests for ListSlice", () => {
  test("initialize slice with initialValue", () => {
    const listSliceInit = ListSlice(initialState, { type: "unknown" });
    expect(listSliceInit).toBe(initialState);
  });
});

Notice that I'm using .spec instead of .test. This doesn't matter. You can choose either. In this case, I'm going with .spec to remind you that this is also a viable option.

Also remember that we exported the initialState within our slice (see above). So we are able to import it here.

Other than that, we are already familiar with the describe() environment, which includes one test(). Within this test, I'm initializing a variable listSliceInit, which will hold the value we are receiving after the slice operation took place.

For this operation, we use ListSlice as a function and include the initial state as the first argument (in this case initialState). The second argument will be a reducer in most cases.

But in this case, we don't need to enter a reducer. Instead, we are using an object with type: "unknown". This is basically telling the function that we don't want to perform any additional operations.

Therefore, listSliceInit should now include our state value, which includes an array with one entry. The corresponding test will pass.

To force a failure, I'm entering expect(listSliceInit).toBe({ value: [] }); instead of the previous expect() function. So instead of our initialState we are expecting it to have an empty array. Now our test environment will tell us the following:

failing test

So it actually tells us what exactly it expected – in this case, it expected the initialState.

Next, I would like to test a reducer. However, we haven't added one yet. So I will adjust ListSlice in the ListSlice.js file like this:

export const ListSlice = createSlice({
  name: "listReducers",
  initialState,
  reducers: {
    testAddReducer: (state, action) => {
      state.value.push(action.payload);
    },
  },
});

Thus, I added testAddReducer(), which is responsible for pushing one additional element to the current state value, which it receives via an input from the dispatch (through action.payload).

If we now jump back to the listSlice.spec.js file, I'm adding another unit test:

import ListSlice, { initialState, testAddReducer } from "../features/ListSlice";

describe("tests for ListSlice", () => {
  test("initialize slice with initialValue", () => {
    const listSliceInit = ListSlice(initialState, { type: "unknown" });
    expect(listSliceInit).toBe(initialState);
  });

  test("testAddReducer", () => {
    const testData = {
      id: `${new Date().getSeconds()}`,
      description: "This is for the test section",
      significance: 5,
    };

    const afterReducerOperation = ListSlice(
      initialState,
      testAddReducer(testData)
    );

    expect(afterReducerOperation).toStrictEqual({
      value: [initialState.value.at(0), testData],
    });
  });
});

I added the test for testAddReducer. You can see that I imported the reducer as well.

Firstly, I'm initializing a new variable, testData, which contains the data I would like to push to the current state.

After that, we follow the same structure as before with afterReducerOperation. But instead of this type: "unknown" stuff, we add the reducer as the second argument. This receives the testData as a parameter – basically like you would see it in a dispatch.

Then, we expect this afterReducerOperation variable to be strictly equal to the value of an array, which has two entries: initialState.value.at(0) (the first entry of our initialState) and testData. And this test will pass like we actually expected it.

If we are trying to enter some other entries or change the current ones, you would be able to see this test failing:

forced error: I added a third entry to the array

How to make the button click function work again

Remember the button click within the List.js component (for adding something to the listData state) that wasn't working anymore after we changed to the Redux setup? Let's quickly update that to make that logic work within a Redux environment for the sake of completeness. Since we have the required reducer now, this will be an easy step.

To make the test work again, which added a new element to the state, we have to adjust it a little on the frontend to implement the Redux logic. (Previously we used the useState hook for a local state.)

For this step, we are making use of the dispatch() function in order to reach out to the testAddReducer:

import { useSelector, useDispatch } from "react-redux";
import { testAddReducer } from "../features/ListSlice";

const List = () => {
  const listState = useSelector((state) => state.listReducers.value);
  const dispatch = useDispatch();

  return (
    <div
      style={{ marginLeft: "auto", marginTop: "500px", marginBottom: "500px" }}
    >
      <h1>This is a list</h1>
      <ul style={{ listStyleType: "none" }}>
        {listState.map((listItem) => {
          return (
            <li key={listItem.id} data-testid="list-item">
              {listItem.description}
            </li>
          );
        })}
      </ul>
      <button
        onClick={() =>
          dispatch(
            testAddReducer({
              id: `${new Date().getSeconds()}1`,
              description: "This is added",
              significance: 5,
            })
          )
        }
      >
        This button can add a new entry to the list
      </button>
    </div>
  );
};

export default List;

Besides the button logic, nothing else has changed in this file.

In the corresponding test (within myFirstTesting.test.js nothing has changed), if we now test everything – including this updated test – we will see that everything works fine:

final test run

And that's pretty much it for fundamental slice and general Redux unit testing!

🔭 Outlook for Advanced Testing

There are different topics like thunks (or RTK Query as an alternative) which could also be tested. But I'm considering this as an advanced topic, and it would take some more time to explain these processes.

If you are not aiming to be an expert in testing at this point, the topics we discussed for unit tests in Redux in this tutorial should be sufficient for you.

Generally speaking, I would recommend diving deeper into so-called mocks, spies, and also snapshots. These will be helpful if you are working on some other more advanced tests.

The stuff with renderWithProvider() is basically based on such a mock – there, we artificially created a store with reducers and a provider to create this new render() function. So mocks are especially helpful for any third-party libraries, for example.

As I said, though, mocks, spies, and snapshots are more of an advanced topic to wrap your head around.

📣 Further Learning Opportunities

I recently started to work on my first free Udemy course. While this first free course covers the basics of the React Redux Toolkit with German audio and manually added English subtitles, I'm also planning to publish other Udemy courses completely in English in the future.

I would really appreciate it if you would check out this cost-free course in order to provide me with some feedback.

In many cases when we want to create a small application, we might have some components that declare and use their own state. And in a few cases, a component might want to share the state with its immediate children.

We can handle these situations just by declaring states locally within a component – and maybe pass the state to its children in the form of props if needed (which is also known as prop drilling).

But if your application grows in size, you might need to pass state to a child which might be several steps down the hierarchy. You might also need to use a common state between sibling components.

Sure, in the case of state sharing between sibling components we can declare the state in their parents and then pass the state down to their children by prop drilling. But that may not always be feasible and has its own disadvantages that we will see in a bit.

Just consider the following diagram:

This is a schematic representation of a component file structure in a typical React application.

Let's say we need to share a common state between Child 5 and Child 6. In that case we can very well declare a state in their parent (that is, Child 2) and pass the state down to the two children (5 and 6).

All good as of now. But what if we need to have the same piece of state in Child 3? In that case we would need to declare the state in the common parent/grandparent of Children 5, 6, and 3 – that is, the App component.

Similarly what if we want to share a state between Children 4, 11, and 10 which are far away from each other in the tree? We would again need to create the state in the App component and then do multiple levels of prop drilling to pass the state from App to these components.

And as time passes and our app grows in size, it will start making our App component or any other such common parent component cluttered with unnecessary state declarations. These declarations aren't used directly by these components but are used by some of their far-down children.

Disadvantages of Multi-Step Prop Drilling

There are primarily two disadvantages with multi level prop drilling. They are:

• Unnecessary bloating of components: As discussed above, as our app grows in size, some common parent components might get bloated with unnecessary state declarations. And these components might not directly use those declarations, but they might be used by some of their distant children. Some other components might also get bloated which are just acting as prop passers to a child component. This will also negatively affect code readability.
• Unnecessary re-rendering: Unnecessary re-rendering is a big no no for a client-side application. Unnecessary re-renders can make an app slow, laggy, unresponsive and give a bad user experience. In React, re-renderings are caused by state or prop changes, among other reasons. So if a component is not actually using a state and is only acting as a passage from parent to child for the props, then it might also get re-rendered unnecessarily when the state/ props changes. See the below picture to understand it better

The Solution to this Problem

This is why we use a state management app like Redux or MobX to handle the above scenarios of state management in a more uniform and efficient way.

In these kind of state management solutions like Redux, we can create a global state and put it in a store. Whichever component requires any state from that store can easily get it by subscribing to the store. This way we can get rid of both the above disadvantages.

• Decluttering of components: Getting state on demand from the component which is "actually" using it can declutter many of our components to a large extent by removing all unnecessary prop drilling.
• No more unnecessary re-renders: As we do not have components that just act as a prop passer, we also avoid unnecessary re-rendering of those components. Only the components that uses a piece of the global state re-render when the state changes which is a desired behavior.

What You'll Learn Here

In this tutorial, you will learn how to set up your own Redux-powered React application. We will create a react application and setup up redux to be able to manage state globally so that any component can access any part of the state (hence the name redux powered react app). Some of the other alternative of redux that one can try are MobX, Zustand etc, but for this article we will be using redux.

We will go through how to create the store and connect it to the application. We'll also see how to write actions and dispatch them on user interactions. Then we'll see how to make reducers and update the store, read the store from other components which are children of App, and much more.

I'll also provide all the important code snippets along the way so that you can quickly spin up the application as you read and code along.

To give you a glimpse in the beginning, this is what we will build by the end:

We will be creating a basic application where we can add and remove items in a cart. We will manage the state changes in the Redux store and display the information in the UI.

Before We Start

Before proceeding with this tutorial, you should be familiar with the Redux store, actions, and reducers.

If you're not, you can go through my last article that I wrote on Redux (if you haven't yet): What is Redux? Store, Actions, and Reducers Explained for Beginners.

This will help you understand the current article. In this previous tutorial, I tried to explain the fundamental principles/ concepts of Redux. I covered what the store is, what actions are, and how reducers work. I also discuss what makes Redux predictable along with an example.

Initial Code Setup

Let's get everything we need setup for our project. Just follow these steps and you'll be up and running in no time.

1. Create a React app with the create-react-app command

npx create-react-app react-app-with-redux

2. Go to the newly created folder

Just type this command to navigate to the new folder:

cd react-app-with-redux

3. Install Redux and the react-redux libraries

You can install Redux and react-redux like this:

npm install redux react-redux

4. Run the application

You can run your new app with the following command:

npm start

How to Build the Main App

5. How to create the Reducer

To create a reducer, first create a folder inside src named actionTypes. Then create a file inside it named actionTypes.js. This file will contain all the actions the application will be dealing with.

Add the following lines in actionTypes.js:

export const ADD_ITEM = "ADD_ITEM";
export const DELETE_ITEM = "DELETE_ITEM";

Since our app will have the functionality of adding and deleting items, we need the above two action types.

Next create a folder inside the src called reducers and create a new file in it named cartReducer.js. This file will contain all the reducer logic related to the cart component.

Note: We will create the view/ UI in step 8, so hold on for that.

Add the following lines in cartReducer.js:

import { ADD_ITEM, DELETE_ITEM } from "../actionTypes/actionTypes";

const initialState = {
  numOfItems: 0,
};

export default const cartReducer = (state = initialState, action) => {
  switch (action.type) {
    case ADD_ITEM:
      return {
        ...state,
        numOfItems: state.numOfItems + 1,
      };

    case DELETE_ITEM:
      return {
        ...state,
        numOfItems: state.numOfItems - 1,
      };
    default:
      return state;
  }
};

As we discussed it in my previous tutorial, we created an initial state for the app and assigned it to the default parameter of state in the cartReducer function.

This function switches on the type of action dispatched. Then depending on whichever case matches with the action type, it makes necessary changes in the state and returns a fresh new instance of the updated state.

If none of the action types matche, then the state is returned as it is.

Finally we make a default export of the cakeReducer function to use it in the store creation process.

6. How to create the store and provide it to the app

Create a file inside src with the name store.js and create the store using this command:

const store = createStore()

Add the following lines in store.js:

import { createStore } from "redux";
import { cartReducer } from "./reducers/cartReducer";

const store = createStore(cartReducer);

export default store;

Now it's time to provide this store to the App component. For this we'll use the <Provider> tag that we get from the react-redux library.

We wrap the whole App component inside the <Provider> tag using the following syntax:

// rest of the code ...

<Provider store={store}>
        <div>App Component</div>
        // child components of App/ other logic
</Provider>

// rest of the code ...

By wrapping the App component inside the <Provider> tag, all the children component of App will get access of the store. You can read my previous article on What is Redux? Store, Actions, and Reducers Explained for Beginners to know more.

Continuing with App.js, add the following lines to the file:

import "./App.css";
import { Provider } from "react-redux";
import store from "./store";

function App() {
  return (
    <Provider store={store}>
      <div>App Component</div>
    </Provider>
  );
}

export default App;

7. Create the Actions

Now create a folder inside src called actions and create a file inside it called cartAction.js. Here we will add all the actions to be dispatched on some user interactions.

Add the following lines in the cartAction.js:

import { ADD_ITEM, DELETE_ITEM } from "../actionTypes/actionTypes";

const addItem = () => {
  return {
    type: ADD_ITEM,
  };
};

const deleteItem = () => {
  return {
    type: DELETE_ITEM,
  };
};

export { addItem, deleteItem };

In the above code we created two action creators (pure JS functions that returns action object) called addItem() and deleteItem(). Both the action creators return action objects with a specific type.

Note: Each action object must have a unique type value. Along with it, any additional data passed with the action object is optional and will depend on the logic used for updating the state

8. How to create the view/UI

Now that we have created all the required entities such as the store, actions, and Reducers, it's time to create the UI elements.

Create a component folder inside src and a Cart.js file inside it. Add the following lines inside Cart.js:

import React from "react";

const Cart = () => {
  return (
    <div className="cart">
      <h2>Number of items in Cart:</h2>
      <button className="green">Add Item to Cart</button>
      <button className="red">Remove Item from Cart</button>
    </div>
  );
};

export default Cart;

Add this Cart component in the App.js file:

import "./App.css";
import { Provider } from "react-redux";
import store from "./store";
import Cart from "./component/Cart";

function App() {
  return (
    <Provider store={store}>
      <Cart />
    </Provider>
  );
}

export default App;

Just to make it a bit presentable, I have added a bit of basic styling in App.css as follows:

button {
  margin: 10px;
  font-size: 16px;
  letter-spacing: 2px;
  font-weight: 400;
  color: #fff;
  padding: 23px 50px;
  text-align: center;
  display: inline-block;
  text-decoration: none;
  border: 0px;
  cursor: pointer;
}
.green {
  background-color: rgb(6, 172, 0);
}
.red {
  background-color: rgb(221, 52, 66);
}
.red:disabled {
  background-color: rgb(193, 191, 191);
  cursor: not-allowed;
}
.cart {
  text-align: center;
}

This is how the UI looks as of now:

9. How to read and access the store using the useSelector hook

useSelector is a hook provided by the react-redux library that helps us read the store and its content(s).

Import the hook from react-redux and use the following syntax to read the store with useSelector hook:

import { useSelector } from "react-redux";
// rest of the code
const state = useSelector((state) => state);

// rest of the code

After adding the useSelector hook, your Cart.js file will look something like this:

import React from "react";
import { useSelector } from "react-redux";

const Cart = () => {
  const state = useSelector((state) => state);
  console.log("store", state);
  return (
    <div className="cart">
      <h2>Number of items in Cart:</h2>
      <button className="green">Add Item to Cart</button>
      <button className="red">Remove Item from Cart</button>
    </div>
  );
};

export default Cart;

Console logging the state will give us the initial state that we set in the reducer file in step 5.

10. How to dispatch an action on button click with the useDispatch hook

The react-redux library gives us another hook called the useDispatch hook. It helps us dispatch the actions or action creators which in turn return actions. The syntax is as follows:

const dispatch = useDispatch();

dispatch(actionObject or calling the action creator);

Thus adding a dispatcher into our Cart.js will finally make the file look something like this:

import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { addItem, deleteItem } from "../actions/cartAction";

const Cart = () => {
  const state = useSelector((state) => state);
  const dispatch = useDispatch();
  return (
    <div className="cart">
      <h2>Number of items in Cart: {state.numOfItems}</h2>
      <button
        onClick={() => {
          dispatch(addItem());
        }}
      >
        Add Item to Cart
      </button>
      <button
        disabled={state.numOfItems > 0 ? false : true}
        onClick={() => {
          dispatch(deleteItem());
        }}
      >
        Remove Item to Cart
      </button>
    </div>
  );
};

export default Cart;

Note how on click of the Add Item to Cart button, we dispatch the action creator addItem() that we created in step no. 7.

Similarly on click on the Remove Item from Cart button, we dispatch the action creator with deleteItem().

The state variable stores the state of the app, which is basically an object with a key numOfItems. So state.numOfItems gives us the current number of items value in the store.

We display this information in the view in the line <h2>Number of items in Cart: {state.numOfItems}</h2>.

To dig a bit deeper, when a user clicks the Add Item to Cart button, it dispatches the addItem() action creator. This, in turn, returns an action object with type type: ADD_ITEM.

As mentioned in my previous tutorial, when an action is dispatched, all the reducers become active.

Currently in this example we have only one reducer – cartReducer. So it becomes active and listens to the action dispatched.

As shown in step 5, the reducer takes the state and the action as input, switches on the action type and returns the fresh new instance of the updated state.

In this example, when the action with type: ADD_ITEM matches the first switch case, it first makes a copy of the entire state using the spread operator ...state. Then it makes the necessary update – which in the case of adding items is numOfItems: state.numOfItems + 1 (that is increasing the numOfItems by 1).

Similarly, using the same logic, on clicking on the Remove Item from Cart button, an action with type type: DELETE_ITEM is dispatched which goes and decreases the numOfItems by 1.

Here is the demo of the working app:

Notice how we were able to control the behavior of the Remove Item from Cart button based on the value of numOfItems in the Redux store. As a negative number of items does not makes sense, we disabled the Remove Item from Cart button if state.numOfItems <= 0.

This way we are able to prevent the user from decreasing the number of items in the cart if its already 0.

This was a basic example to show you how we can control the behavior of various DOM elements based on the internal state of the app.

And there you go! We just finished setting up our first Redux-powered React application. Now you can go ahead and create various other components based on your requirements and share a common global state among them.

GitHub Repo

Here's the GitHub repo of the project so you can examine the full source code if you like: GitHub repo

Summary

In this article, we learned how to quickly spin up a Redux-powered React application.

Along the way, we learned how to:

• Create actions, action creators, reducers, and the store
• Provide the store to the app using <Provider>
• Read/ access the store from components using the useSelector hook and display the state information in the UI
• Dispatch the actions on user events such as button clicks, using the useDispatch hook
• Control the DOM elements' behavior with logic based on the state of the application
• We learnt what are the disadvantages of in-efficient state management and multiple level of prop drilling

Additional Resources

Here are some additional resources that you can look into to learn more about Redux

• What is Redux? Store, Actions, and Reducers Explained for Beginners
• Official Redux Docs

Wrapping Up

Thanks for reading! I really hope you enjoyed reading about how to spin up a Redux-powered React application and found this tutorial useful.

Do consider sharing it with your friends, as I'd really appreciate that. Follow me on LinkedIn and Twitter and stay tuned for more amazing content! Peace out! 🖖

Social Links

• LinkedIn
• Website
• Other Blogs by me
• Twitter

If we dig deeper into this statement, we see that Redux is a state management library that you can use with any JS library or framework like React, Angular, or Vue.

In this article, we'll be covering the fundamentals of Redux. We will learn what Redux is at its core along with its three key principles.

We will also see how some of its core building blocks work, such as store, actions, and reducers and how they all come together and make Redux the global state management library that it is.

As a prerequisite, I will be assuming that you're familiar with React.

Why Use Redux?

Well, an application has its state, which can be a combination of the states of its internal components.

Let's take an e-commerce website for example. An e-commerce website will have several components like the cart component, user profile component, previously viewed section component, and so on.

We'll take the cart component which displays the number of items in a user's cart. The state of the cart component will consist of all the items the user has added to the cart and the total number of those items. At all times the application is up and running, this component has to show the updated number of items in the user's cart.

Whenever a user adds an item to the cart, the application has to internally handle that action by adding that item to the cart object. It has to maintain its state internally and also show the user the total number of items in the cart in the UI.

Similarly, removing an item from the cart should decrease the number of items in the cart internally. It should remove the item from the cart object and also display the updated total number of items in the cart in the UI.

We may very well maintain the internal state of the components inside them, but as and when an application grows bigger, it may have to share some state between components. This is not just only to show them in the view, but also to manage or update them or perform some logic based on their value.

This task of handling multiple states from multiple components efficiently can become challenging when the application grows in size.

This is where Redux comes into the picture. Being a state management library, Redux will basically store and manage all the application's states.

It also provides us with some important APIs using which we can make changes to the existing state as well as fetch the current state of the application.

What Makes Redux Predictable?

State is Read-only in Redux. What makes Redux predictable is that to make a change in the state of the application, we need to dispatch an action which describes what changes we want to make in the state.

These actions are then consumed by something known as reducers, whose sole job is to accept two things (the action and the current state of the application) and return a new updated instance of the state.

We'll talk more about actions and reducers in the following sections.

Note that reducers do not change any part of the state. Rather a reducer produces a new instance of the state with all the necessary updates.

According to Dan Abramov (the creator of Redux) himself,

"Actions can be recorded and replayed later, so this makes state management predictable. With the same actions in the same order, you're going to end up in the same state."

So continuing with our above example of an e-commerce website, if the initial state of the cart is that it has 0 items, then an action of adding one item to the cart will increase the number of items in the cart by 1. And firing the action of adding one item to the cart again will increase the number of items in the cart to 2.

Given an initial state, with a specific list of actions in a specific order, it'll always provide us with the exact same final state of the entity. This is how Redux makes state management predictable.

In the following section, we will dive deep into the core concepts of Redux – the store, actions and reducers.

Core Principles of Redux

1. What is the Redux Store?

The global state of an application is stored in an object tree within a single store – Redux docs

The Redux store is the main, central bucket which stores all the states of an application. It should be considered and maintained as a single source of truth for the state of the application.

If the store is provided to the App.js (by wrapping the App component within the <Provider> </Provider> tag) as shown in the code snippet below, then all its children (children components of App.js) can also access the state of the application from the store. This makes it act as a global state.

// src/index.js

import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'

import { App } from './App'
import createStore from './createReduxStore'

const store = createStore()

// As of React 18
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
  <Provider store={store}>
    <App />
  </Provider>
)

The state of the whole application is stored in the form of a JS object tree in a single store as shown below.

// this is how the store object structure looks like
{
    noOfItemInCart: 2,
    cart: [
        {
            bookName: "Harry Potter and the Chamber of Secrets",
            noOfItem: 1,
        },
        {
            bookName: "Harry Potter and the Prisoner of Azkaban",
            noOfItem: 1
        }
    ]
}

2. What Are Actions in Redux?

The only way to change the state is to emit an action, which is an object describing what happened – Redux Docs

As mentioned above, state in Redux is read-only. This helps you restrict any part of the view or any network calls to write/update the state directly.

Instead, if anyone wants to change the state of the application, then they'll need to express their intention of doing so by emitting or dispatching an action.

Let's take the example of the above store example where we have 2 books in the store: "Harry Potter and the Chamber of Secrets" and "Harry Potter and the Prisoner of Azkaban". There's just one copy of each.

Now if the user wants to add another item to the cart, then they will have to click on the "Add to Cart" button next to the item.

On the click of the "Add to Cart" button, an action will be dispatched. This action is nothing but a JS object describing what changes need to be done in the store. Something like this:

// Rest of the code

const dispatch = useDispatch()

const addItemToCart = () => {
return {
    type: "ADD_ITEM_TO_CART"
    payload: {
        bookName: "Harry Potter and the Goblet of Fire",
        noOfItem: 1,
        }
    }
}

<button onClick = {() => dispatch(addItemToCart())}>Add to cart</button>

// Rest of the code

Note how in the above example, we dispatch an action on click of the button. Or rather, to be more specific, we dispatch something known as an action creator – that is, the function addItemToCart(). This in turn returns an action which is a plain JS object describing the purpose of the action denoted by the type key along with any other data required for the state change. In this case, it's the name of the book to be added to the cart denoted by the payload key.

Every action must have at least a type associated with it. Any other detail that needs to be passed is optional and will depend on the type of action we dispatch.

For example, the above code snippet dispatches the following action:

// Action that got created by the action creator addItemToCart()

{
    type: "ADD_ITEM_TO_CART" // Note: Every action must have a type key
    payload: {
        bookName: "Harry Potter and the Goblet of Fire",
        noOfItem: 1,
    }
}

3. What Are Reducers in Redux?

To specify how the state tree is transformed by actions, we write pure reducers – Redux docs

Reducers, as the name suggests, take in two things: previous state and an action. Then they reduce it (read it return) to one entity: the new updated instance of state.

So reducers are basically pure JS functions which take in the previous state and an action and return the newly updated state.

There can either be one reducer if it is a simple app or multiple reducers taking care of different parts or slices of the global state in a bigger application.

For example, there can be a reducer handling the state of the cart in a shopping application, then there can be a reducer handling the user details part of the application, and so on.

Whenever an action is dispatched, all the reducers are activated. Each reducer filters out the action using a switch statement switching on the action type. Whenever the switch statement matches with the action passed, the corresponding reducers take the necessary action to make the update and return a fresh new instance of the global state.

Continuing with our above example, we can have a reducer as follows:

const initialCartState = {    
    noOfItemInCart: 0,          
    cart: []                              
}

// NOTE: 
// It is important to pass an initial state as default to 
// the state parameter to handle the case of calling 
// the reducers for the first time when the 
// state might be undefined

const cartReducer = (state = initialCartState, action) => {
    switch (action.type) {
        case "ADD_ITEM_TO_CART": 
            return {
                ...state,
                noOfItemInCart: state.noOfItemInCart + 1,
                cart : [
                    ...state.cart,
                    action.payload
                ]
            }
        case "DELETE_ITEM_FROM_CART":
            return {
                // Remaining logic
            }
        default: 
            return state  
    }       // Important to handle the default behaviour
}           // either by returning the whole state as it is 
            // or by performing any required logic

In the above code snippet, we created a reducer called cartReducer which is a pure JS function. This function accepts two parameters: state and action.

Note that the state parameter is a default parameter which accepts an initial state. This is to handle the scenario when the reducer is called for the first time when the state value is undefined.

Also note that every reducer should handle the default case where, if none of the switch cases match with the passed action, then the reducer should return state as it is or perform any required logic on it before passing the state.

Whenever we dispatch an action with a certain type, we need to make sure to have appropriate reducers to handle that action.

In the above example, on clicking the button, we had dispatched an action with an action creator called addItemToCart(). This action creator has dispatched an action with the type ADD_ITEM_TO_CART.

Next, we have created a reducer called cartReducer which takes the state (with the default initial state) and the action as parameters. It switches on the action type, and then whichever case matches with the dispatched action type, it makes the necessary update and returns the fresh new version of the updated state.

Note here that state in redux is immutable. So, the reducers make a copy of the entire current state first, make the necessary changes, and then return a fresh new instance of the state – with all the necessary changes/ updates.

So in the above example, we first make a copy of the entire state using the spread operator ...state. Then we increment the noOfItemInCart by 1, update the cart array by adding the new object passed in the action.payload shown below, and then finally return the updated object.

{
    bookName: "Harry Potter and the Goblet of Fire",
    noOfItem: 1,
}

After the reducers have updated the state, if we go and console.log the state, then we would see the following result:

// Updated store

{
    noOfItemInCart: 3, // Incremented by 1
    cart: [
        {
            bookName: "Harry Potter and the Chamber of Secrets",
            noOfItem: 1,
        },
        {
            bookName: "Harry Potter and the Prisoner of Azkaban",
            noOfItem: 1
        },
        { // Newly added object
            bookName: "Harry Potter and the Goblet of Fire",
            noOfItem: 1,
        }
    ]
}

Summary

In short, the following three principles completely govern how Redux works:

• The global state of an application is stored in an object tree within a single store
• The only way to change the state is to emit an action, which is an object describing what happened
• To specify how the state tree is transformed by actions, we write pure reducers

Wrapping Up

Thanks for reading! I really hope you enjoyed learning about Redux and its core principles and found this tutorial useful.

Do consider sharing it with your friends, I'd really appreciate that. Stay tuned for more amazing content. Peace out! 🖖

Social Links

• LinkedIn
• Website
• Other Blogs
• Twitter

We just published a full course on the freeCodeCamp.org YouTube channel that will teach you how to use Redux Toolkit.

John Smilga published this course. He has created many very popular courses on the freeCodeCamp.org YouTube channel.

Redux is a JavaScript library for managing application state. It is most commonly used with React, but can be used with other JavaScript frameworks as well.

Redux Toolkit is a set of tools that helps simplify Redux development. It includes utilities for creating and managing Redux stores, as well as for writing Redux actions and reducers.

The Redux team recommends using Redux Toolkit anytime you need to use Redux. In this course you will learn how to use Redux Toolkit in your own applications.

Here are the sections covered in this course:

• Setup Store
• Create Slice
• Dev Tools
• useSelector()
• Hero Icons
• Local Data
• Render List
• Cart Item
• Clear Cart
• Return State
• Remove Item
• Toggle Amount
• Calculate Totals
• Create Modal
• Modal Complete
• createAsyncThunk
• createAsyncThunk Options

Watch the full course below or on the freeCodeCamp.org YouTube channel (2-hour watch).

We will use React with Typescript for creating the UI, Redux for managing the application state, and styled-components for applying the styling. And last, but not least, we'll use WebSockets for fetching the data feeds.

GitHub Repo

💡 If you want to skip the reading, here 💁 is the GitHub repository with a detailed README 🙌, and here you can see the live demo.

What is an Order Book?

An Order Book is an application that usually displays some kind of information related to buying and selling stuff.

💡 The most common use case is showing data for various assets, such as stocks, bonds, currencies, and even cryptocurrencies.

Why Would I Need an Order Book?

In practice, Order Books are used by traders to watch the fluctuations of the bidding price and the asking price of certain products – currencies, stocks, and so on.

This is happening real time, so the changes can be very rapid. Here is where WebSockets will come in handy, as you will see later.

In the past, people did something similar on paper, but the ‘real-time' part was impossible, of course.

A regular Order Book usually has two sides: buying (or bidding), shown in green on the left side and selling (or asking), red, on the right.

Classic Order book

The Plan for our Order Book App

Our Order Book app will consist of five parts:

• order book main view

• grouping select box

• Toggle Feed button

• Kill Feed button

• Status Message.

The app design will look as shown below. Note that the Status Message component, that you will see in the my implementation, is missing on these screenshots:

Desktop layout

Mobile layout

Application Features

Order book

The order book has two sides: the buy side and the sell side.

Both sides contain information about the number of orders opened at each price level.

Each level displays:

• Price: this is what defines the level. As orders must be placed at a price that is a multiple of the selected market's tick size (0.5), each level will be an increment of 0.5 (as long as there is an order open at that level).

• Size: the total quantity of contracts derived from open orders that have been placed at this level.

• Total: the summed amount of contracts derived from open orders that reside in the book at this level and above. To calculate the total of a given level we take the size of the current level and sum the sizes leading to this price level in the order book. The total is also used to calculate the depth visualizer (colored bars behind the levels). The depth of each level is calculated by taking that level's total as a percentage of the highest total in the book.

Grouping Select Box

By default the orders are grouped by the selected market's ticket size (0.5).

Possible toggling of the grouping is between 0.5, 1, 2.5 for XBTUSD market and 0.05, 0.1 and 0.25 for ETHUSD market.

To group levels, we combine the levels rounded down to the nearest group size – for example, if we change our grouping from 0.5 to 1 then we would combine the data from prices 1000 and 1000.5 and display it under a single level in the order book with the price 1000.

Toggle Feed Button

This button toggles the selected market between PI_XBTUSD and PI_ETHUSD. These are the two markets we will support -> Bitcoin/USD and Ethereum/USD.

It supports dynamic grouping logic and handles groupings for XBT (0.5, 1, 2.5) and groupings for ETH (0.05, 0.1, 0.25).

Kill Feed Button

Clicking this button stops the feed.

Then clicking this button a second time renews the feed.

Status Message

This message will show the currently selected market. It will also show a message saying the feed is killed.

Tech Stack for our App

Here is a list of the main technologies we will be using:

• React with TypeScript (yarn create react-app my-app --template typescript) — a UI library we will use for building our application’s user interfaces.

• Redux — a state management library we will use for managing our application’s state.

• WebSockets — The WebSocket object provides the API for creating and managing a WebSocket connection to a server, as well as for sending and receiving data on the connection. We will use it to implement the logic for consuming the live feeds as well as to be able to stop and renew.

• styled-components — a CSS-in-JS library that lets you define the CSS styles of your components using ES6 template literals. We will use it to add styles to our app and make the look and feel beautiful. It utilizes tagged template literals to style your components and removes the mapping between components and styles. This means that when you’re defining your styles, you’re actually creating a normal React component that has your styles attached to it.

• react-testing-library — The React Testing Library is a very light-weight solution for testing React components. We will use it for testing the UI components of our app.

• Jest - a JavaScript Testing Framework that has become the de facto standard when we talk about testing React applications. We will use it to write some unit tests that will cover the reducer functions we have in our app.

How to Build the App

From this point onward I will try to guide you through the process I followed when building this.

💡 I must say that what I am showing you here is just a way of creating such an app – but it's not the way in any regard. Probably folks with more experience in crypto would do it better.

Project Structure

The project structure is pretty straightforward. We are using React and styled-components, which makes this way of structuring very convenient.

Let's see first what it looks like and then I will explain the what and the why.

Project structure

As you can see on the image above, I have organized most of the components in folders. Each folder contains an index.tsx file, a styles.tsx and a .test.tsx files.

index.tsx – contains the code responsible for the component logic.

styles.tsx – contains the code responsible for styling the component. Here is where styled-components shines.

.text.tsx – these contain the component unit tests.

Let me give you a short summary of the idea behind each of the components in the components folder. Starting top to bottom:

Button renders a button with a given background color and title. It's used for the two buttons in the footer, Toggle Feed and Kill Feed / Renew Feed.

DepthVisualizer is the component responsible for drawing the red and the green backgrounds you are seeing behind the numbers. It does this by rendering a row (an HTML div element) with given width, position being left (Bids) or right (Asks).

Footer – well, there's not much to say here, it contains the two buttons used in the app.

GroupingSelectBox renders the select box we use to change the grouping value, using setGrouping reducer to amend the application state when grouping is being changed.

Header renders the title of the application as well as the GroupingSelectBox component.

Loader renders loading animation implemented by leveraging SVG.

Order Book contains the core logic of the app. Separated components are located in sub-folders, and the Redux state management logic is here also.

Spread renders the spread value, displayed in the middle of the header (in desktop view). The component itself contains short methods for calculating the amount itself and the percentage value.

StatusMessage is a small component used to display status messages. It basically shows which market is currently being displayed and whether the feed is killed.

Rendering Performance

Here is a good moment to talk about rendering performance and inline styling a bit.

Rendering is the process of React asking your components to describe what they want their section of the UI to look like based on the current combination of props and state.

This process is triggered by a change of the state in your component. This change could be caused by some of the props being changed or by some internal logic of the component.

The point here is that when re-rendering happens unnecessarily, it reduces the performance of our app. This is exactly what happened to me when I introduced the initial implementation of the DepthVisualizer component. It was using styled-components, that is JavaScript, for the drawing part.

In order to solve this, I have changed the component to use inline styles, that is pure CSS, instead of a CSS in JS approach. In other words, my bottleneck was using JavaScript animations, which is a famous reason for reduced performance.

Here is how it looks like now:

const DepthVisualizer: FunctionComponent<DepthVisualizerProps> = ({windowWidth, depth, orderType }) => {
  return <div style={{
    backgroundColor: `${orderType === OrderType.BIDS ? DepthVisualizerColors.BIDS : DepthVisualizerColors.ASKS}`,
    height: "1.250em",
    width: `${depth}%`,
    position: "relative",
    top: 21,
    left: `${orderType === OrderType.BIDS && windowWidth > MOBILE_WIDTH ? `${100 - depth}%` : 0}`,
    marginTop: -24,
    zIndex: 1,
  }} />;
};

export default DepthVisualizer;

Inline styling is when you write your CSS along with your markup, as values for the style attribute. This is something that is NOT considered a good practice, but as you can see here, there are cases when it's necessary to use it.

💡 Usually you would extract your CSS code into a separate file.

Footer a simple dummy component used to render the two buttons in the footer of the app.

Dummy components, also known as stateless or representational ones, are components that don't hold state and are usually used just to visualize data in some way. This data is being passed via the props. For example the isFeedKilled flag in the component above.

If such a component needs to execute some kind of interaction, it usually does this by accepting (again via the props, for example toggleFeedCallback) callback functions that can be executed when that interaction happens. For example clicking a button.

On the opposite side we could have smart or state-full components. They are the ones that are connected to the app state and can manipulate it directly. Usually they are the ones that read the data from the state and pass it to the stateless components via their props.

GroupingSelectBox contains the Select element you can use to switch between the groupings.

Header is the header part of the app. It takes care of setting properly the layout consisting of the title 'Order Book' on the left and the select box on the right.

Loader is used as an indicator for when the data has not yet been loaded. It leverages a SVG animation I have found online.

Order Book is where the real thing is happening. This one consists of a few smaller components:

• TableContainer – used for styling the views for both the Odds and Bets sides.

• TitleRow – this is the component responsible for displaying the titles of the columns: prize, size, and total, respectively.

How to Build the UI with React and styled-components

When we talk about component-based structure, such as the one React provides us, the styled-components library is likely one of the first choices you might make when styling is needed.

Like Josh Comeau says in his detailed article:

💡 It's a wonderful tool. In many ways, it's changed how I think about CSS architecture, and has helped me keep my codebase clean and modular, just like React!

As the name of the lib hints, we could easily style our components by using the CSS-in-JS pattern. Here is an example of how I used it to write the styles for my Button component:

import styled from "styled-components";

interface ContainerProps {
  backgroundColor: string;
}

export const Container = styled.button<ContainerProps>`
  padding: .3em .7em;
  margin: 1em;
  border-radius: 4px;
  border: none;
  color: white;
  background: ${props => props.backgroundColor};
  font-family: "Calibri", sans-serif;
  font-size: 1.2em;

  &:hover {
    cursor: pointer;
    opacity: .8;
  }
`

Notice how I am using an interface in my styles file, and also the background property being passed as an argument via props. This is part of the CSS-in-JS story.

The possibility to use CSS code in JavaScript or (as someone might say) vice versa comes very handy. For example, when we need a component to look differently depending on something, we can pass through its props a parameter to define this.

As every style is actually a component, this way of writing styles feels a lot like writing React components. I mean, in the end, everything is components, right?

Responsiveness and Page Visibility Detection

While working on this app, I read in several places that, for applications which support rapid updates, is a good practice to implement some kind of mechanism for pausing the whole thing when it is not being used by the user. For example when the user minimizes the browser window or just opens another tab.

Since our Order book is consuming a lot of new chunks of data every second via WSS, I decided to implement such a mechanism as well.

What this does is:

• it shows a loader when the data is not there yet

• it changes the meta title to signify that the app is in paused mode

• it unpauses the work once the app window is on focus

Active mode

Paused mode

You may see the whole implementation here.

The essential part is in the useEffect hook, which is triggered only once when the application renders for first time.

In there we take advantage of the Page Visibility API by attaching the necessary listeners. And then, in the handlers, we simply execute the logic we want.

Window Size Detection

In almost every app that has some level of responsiveness, you need some logic for detecting the changes in the window size and taking some actions accordingly.

In other words, you need to know when your app is being viewed in certain screen size, so you can arrange your components and adjust your styles so that everything looks nice and in place.

This is especially valid for mobile friendly applications, where responsiveness is essential.

Our implementation of the window size change detection is based on the innerWidtgh property of the browser window object and onresize event that is being triggered when it gets resized.

I am attaching a listener for this event in a useEffect hook in App.tsx file. And then, every time the window size changes, I am setting the new width to a state variable via setWindowWidth hook.

const [windowWidth, setWindowWidth] = useState(0);
...
...

// Window width detection
useEffect(() => {
  window.onresize = () => {
    setWindowWidth(window.innerWidth);
  }
  setWindowWidth(() => window.innerWidth);
}, []);

Then propagate this variable down through all interested components and use it accordingly. For example here is how I use it in Order Book/index.tsx in order to know when and where to render the TitleRow component.

{windowWidth > MOBILE_WIDTH && <TitleRow windowWidth={windowWidth} reversedFieldsOrder={false} />}

TitleRow component - desktop view

TitleRow component - mobile view

Note that it appears on different position depending on that whether you are seeing the app on desktop or mobile.

You may take a look at the component itself and see similar approach of using the window width there.

State Management with Redux

As you probably guessed already, I used Redux for managing the state of the app.

The main logic behind that is concentrated in the orderbookSlice reducer. In the following few lines I will walk you through it and see how and why I built it that way.

First we define the interface and the initial state of our order book data. The initial state contains the default values we need to have in place when starting the app.

export interface OrderbookState {
  market: string;
  rawBids: number[][];
  bids: number[][];
  maxTotalBids: number;
  rawAsks: number[][];
  asks: number[][];
  maxTotalAsks: number;
  groupingSize: number;
}

const initialState: OrderbookState = {
  market: 'PI_XBTUSD', // PI_ETHUSD
  rawBids: [],
  bids: [],
  maxTotalBids: 0,
  rawAsks: [],
  asks: [],
  maxTotalAsks: 0,
  groupingSize: 0.5
};

Then there are a few short, self-explanatory methods helping to manipulate the levels data:

const removePriceLevel = (price: number, levels: number[][]): number[][] => levels.filter(level => level[0] !== price);

const updatePriceLevel = (updatedLevel: number[], levels: number[][]): number[][] => {
  return levels.map(level => {
    if (level[0] === updatedLevel[0]) {
      level = updatedLevel;
    }
    return level;
  });
};

const levelExists = (deltaLevelPrice: number, currentLevels: number[][]): boolean => currentLevels.some(level => level[0] === deltaLevelPrice);

const addPriceLevel = (deltaLevel: number[], levels: number[][]): number[][] => {
  return [ ...levels, deltaLevel ];
};

Then the real magic is happening. If the size returned by a delta is 0 then that price level should be removed from the order book. Otherwise you can safely overwrite the state of that price level with new data returned by that delta.

/** The orders returned by the feed are in the format
 of [price, size][].
 * @param currentLevels Existing price levels - `bids` or `asks`
 * @param orders Update of a price level
 */
const applyDeltas = (currentLevels: number[][], orders: number[][]): number[][] => {
  let updatedLevels: number[][] = currentLevels;

  orders.forEach((deltaLevel) => {
    const deltaLevelPrice = deltaLevel[0];
    const deltaLevelSize = deltaLevel[1];

    // If new size is zero - delete the price level
    if (deltaLevelSize === 0 && updatedLevels.length > ORDERBOOK_LEVELS) {
      updatedLevels = removePriceLevel(deltaLevelPrice, updatedLevels);
    } else {
      // If the price level exists and the size is not zero, update it
      if (levelExists(deltaLevelPrice, currentLevels)) {
        updatedLevels = updatePriceLevel(deltaLevel, updatedLevels);
      } else {
        // If the price level doesn't exist in the orderbook and there are less than 25 levels, add it
        if (updatedLevels.length < ORDERBOOK_LEVELS) {
          updatedLevels = addPriceLevel(deltaLevel, updatedLevels);
        }
      }
    }
  });

  return updatedLevels;
}

What follows after these are few helper methods. Let me say a few words about each of them now:

• addTotalSums – with the help of this method, we iterate through the orders data, bids or asks, and calculate for each of them the total sum. The total sum value is then used for making the background visualizations.

• addDepths – we use this method to calculate the so-called depth for each order. These values will be used later by the depth meter component to display the red and green rows in the background.

• getMaxTotalSum – this one returns the max value of all total sums.

Everything below is what we use for creating the application state. As per the Redux Toolkit documentation, it’s using createSliceAPI to create the slice.

Redux state

Creating a slice requires a string name to identify the slice, an initial state value, and one or more reducer functions to define how the state can be updated.

Once a slice is created, we can export the generated Redux action creators and the reducer function for the whole slice.

The last few lines consist of the exports in question – action creators, state slices selectors and the main reducer.

export const { addBids, addAsks, addExistingState, setGrouping, clearOrdersState } = orderbookSlice.actions;

export const selectBids = (state: RootState): number[][] => state.orderbook.bids;
export const selectAsks = (state: RootState): number[][] => state.orderbook.asks;
export const selectGrouping = (state: RootState): number => state.orderbook.groupingSize;
export const selectMarket = (state: RootState): string => state.orderbook.market;

export default orderbookSlice.reducer;

With all that, our state manipulation logic is complete. 🎉

Now it’s time to take a look at the protocol we used in our app to take advantage of all these rapid changes in the data we consume.

Websocket Protocol (WSS)

As you may have noticed, we're using the Web Socket communication protocol for fetching data into our application. We also use its features, as you will see in a moment, to accomplish other things (such as toggling the feeds and subscribe/unsubscribe from the data channel).

Here is how I used it.

Instead of trying to rely on manual implementation, I used the react-use-websocket package. It gives you all you need when you want to leverage WSS in a React app. If you want to go into details about this, you may take a look at their documentation.

A Few Words About My Implementation

What we need fist is the endpoint URL where the data feeds are coming from. I am sure there are multiple options out there when we talk about cryptocurrencies. In our app I used the one provided by www.cryptofacilities.com/.

const WSS_FEED_URL: string = 'wss://www.cryptofacilities.com/ws/v1';

Then the only thing we need to do to start consuming the data is to put the useWebSocket hook to work. As you may have guessed already, this hook is provided by the package mentioned above.

import useWebSocket from ["react-use-websocket"](<https://github.com/robtaussig/react-use-websocket>);

...
...
...

const { sendJsonMessage, getWebSocket } = useWebSocket(WSS_FEED_URL, {
    onOpen: () => console.log('WebSocket connection opened.'),
    onClose: () => console.log('WebSocket connection closed.'),
    shouldReconnect: (closeEvent) => true,
    onMessage: (event: WebSocketEventMap['message']) =>  processMessages(event)
  });

We pass the endpoint as the first argument and a few callback functions after that. These help us perform certain actions when one of the following happens:

• onOpen – what to do when WebSocket connection is established.

• onClose – what to do when WebSocket connection is terminated.

• shouldReconnect – this is just a flag, saying if we want automatic reconnect when the connection drops for some reason.

• onMessage – this is the main event that brings us the chunks with the data (I call processMessage method every time when that happens. This means that every time when a new chunk of data is received, we process it and display it respectively).

Down below is the method in question. It simply does two things:

• Either calls a method called process (No pun intended 😄) – this method is called every time new data for bids or asks is received and it processes it accordingly.

• Dispatches an event that is using one of the reducer functions we have seen earlier. This function practically creates the initial state of our application.

In order to decide whether we are adding data to the current state or we should initialize it, we check for a property called numLevels. This is something that comes from the API, the very first time we establish the WebSocket connection.

Initial payload

The rest of the code you see in this file is mostly for preparing and rendering the results on the screen.

The most interesting part would be the method buildPriceLevels that is used for both halves – bids and asks. It sorts the data, makes the necessary calculations, and passes it to the relevant components for visualizing it. Those are DepthVisualizer and PriceLevelRow I mentioned earlier in this article.

Grouping

The grouping is an important part of how the order book works, as it defines by what ticket size the orders are grouped.

In our application, I have implemented a toggling functionality per each market, that allows grouping it as follows:

• Between 0.5, 1, 2.5 for XBTUSD market.

XBTUSD market grouping

• Between 0.05, 0.1 and 0.25 for ETHUSD market.

ETHUSD market grouping

There is a short gist I created when trying to figure out how to implement the grouping logic. You may find it here.

Also, aside from that gist, while developing this I have performed more than a few experiments out of the project itself. And just because these are just local files on my computer, I will publish them here for those of you who are even more curious.

It’s a small side npm project that has only one dependency. Here is the package.json file:

{
  "name": "grouping",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "lodash.groupby": "^4.6.0"
  }
}

And here is the code itself:

const bids = [
    [
        50163,
        110
    ],
    [
        50162,
        13140
    ],
    [
        50158,
        3763
    ],
    [
        50156,
        1570
    ],
    [
        50155,
        21997
    ],
    [
        50152.5,
        450
    ],
    [
        50151,
        4669
    ],
    [
        50150.5,
        10329
    ],
    [
        50150,
        2500
    ],
    [
        50149.5,
        450
    ],
    [
        50149,
        4022
    ],
    [
        50148,
        20000
    ],
    [
        50147,
        5166
    ],
    [
        50146.5,
        5274
    ],
    [
        50145,
        174609
    ],
    [
        50143,
        20000
    ],
    [
        50141,
        28000
    ],
    [
        50140.5,
        5000
    ],
    [
        50138,
        6000
    ],
    [
        50132.5,
        4529
    ],
    [
        50132,
        4755
    ],
    [
        50131,
        12483
    ],
    [
        50128.5,
        61115
    ],
    [
        50128,
        23064
    ],
    [
        50125.5,
        181363
    ]
]

/* function roundDownNearest(num, acc) {
    if (acc < 0) {
        return Math.floor(num * acc) / acc;
    } else {
        return Math.floor(num / acc) * acc;
    }
} */

/* function groupByTicketSize(ticketSize, levels) {
    const result = levels.map((element, idx) => {
        const nextLevel = levels[idx + 1];

        if (nextLevel) {
            const currentPrice = element[0];
            const currentSize = element[1];
            const nextPrice = nextLevel[0];
            const nextSize = nextLevel[1];
            console.log("current level: ", element)
            console.log("next level: ", nextLevel)

            element[0] = roundDownNearest(currentPrice, ticketSize);

            if (currentPrice - nextPrice < ticketSize) {
                element[1] = currentSize + nextSize;
            }
            console.log("==================================> Result: ", element)

            return element;
        }

    }).filter(Boolean); 


    console.log("============================================================");
    console.log(result)
} */

const test = [
    [1004.5, 1],
    [1001.5, 1],
    [1001,   1],
    [1000.5, 1],
    [1000,   1],
    [999.5,  1],
    [999,    1],
    [990,    1],
    [988,    1]
]

function groupByTicketSize(ticketSize, levels) {
    const result = [];

    for (let i = 0; i < levels.length; i++) {
        console.log(levels[i])
        const prevLevel = levels[i-1]
        const level1 = levels[i]
        const level2 = levels[i+1]

        if (prevLevel && level1 && level1[0] - ticketSize === prevLevel) return

        if (level2 && level1[0] - level2[0] < ticketSize) {
            const newLevel = [level2[0], level1[1] + level2[1]];
            console.log("newLevel", newLevel)
            result.push(newLevel);
        } else {
            result.push(level1)
        }
    }

    console.log("============================================================");
    console.log(result)
}

// groupByTicketSize(1, bids);
groupByTicketSize(1, test);

How to Perform Unit Tests on the App

For performing unit testing I used the react-testing-library.

The main idea behind it that the developer should write tests only for what the user will see and interact with. There is no much point of testing implementation details.

💡 Imagine, just to give you an example, that you have implemented a list component that is just displaying lines of textual data. Say something like a todo list.

Then imagine that this data is coming from an API call in the shape of array. A data structure that you could easily iterate through via various methods – some sort of a loop cycle, such as for() or while(). Or you could use another more functional approach, say .map() method.

Now ask yourself – for the end user, the one that will just see the listed text data, does your implementation matter? As long as everything works as expected and in a good, performant way, the answer is ‘no, it does not’.

This is what your tests should reflect.

In the context of our Order Book application, each test file is located in the same directory as the implementation file. Most of the tests are short and self-explanatory, due to the fact that these are testing mostly rendering logic and only the happy path.

For example let’s take a look at the button component tests below:

import React from 'react';
import { render, screen } from '@testing-library/react';
import Button from './index';

test('renders button with title', () => {
  render(<Button backgroundColor={'red'} callback={jest.fn} title={'Toggle'} />);
  const btnElement = screen.getByText(/Toggle/i);
  expect(btnElement).toBeInTheDocument();
});

It just verifies that the component is rendered properly and it displays what we expect the user to see. Which is the title Toggle in this case.

For testing the reducers I have used Jest, as this is the only not visual part that we'll cover. These tests are also pretty simple and self-explanatory. I use them for testing whether the initial application state is in place and to see that adding price levels to that state works correctly.

How to Deploy the App to Vercel

Finally – deployment time. 🎉

After finishing the development and testing our application, let’s put it live.

I used the Vercel platform for this purpose. They offer a pretty rich and easy to use interface as well as integrations for all famous source control platforms out there – including, of course, GitHub (where our application repo lives).

Assuming you have a GitHub account, what you need to do if you want to deploy it on your own is to login with it here.

Vercel login screen

Click on the +New Project button in the top right corner. Then import your Git repository using the provided options in the screen that opens. Here is how mine looks:

Vercel Import Git Repository screen

After importing the project, you will be able to do the actual deploy. When finished, Vercel will generate URLs for you to access your newly deployed app.

Vercel production deployment screen

And I think you will receive an email letting you know if your deployment was successful. That email also contains these URLs.

Vercel successful deployment email

Congratulations! 👏🏻

You now have your own Order Book application up and running online.

How to Add a Build Badge on GitHub

This is not order book related, but I decided to share it with you here anyway. It’s about those small details that make the big picture somehow more complete and attractive.

Maybe some of you have wondered how can you get one of these so called badges?

Here is the answer: https://shields.io/.

You go to the Other section and find the GitHub Deployments option.

Then click on it and follow the instructions.

There is one more thing you need to do in order to have this fully functioning. You go to your GitHub repository → Actions tab and create new workflow file. You may just go ahead and copy the content of mine from here. Name it main.yml.

What this will do is run the jobs defined in that file. In our case this is just the build job which is basically spinning a new build and running the tests.

After completing this, you just need add the following lines to your README file:

<!-- prettier-ignore-start -->
[![Tests](<https://github.com/mihailgaberov/orderbook/actions/workflows/main.yml/badge.svg>)](<https://github.com/mihailgaberov/orderbook/actions/workflows/main.yml>)
[![Build Status][build-badge]][build]

[build-badge]: <https://img.shields.io/github/deployments/mihailgaberov/orderbook/production?label=vercel&logoColor=vercel>
[build]: <https://github.com/mihailgaberov/orderbook/deployments>
<!-- prettier-ignore-end -->

💡 Don’t forget to put your own details in the URLs, that is your GitHub username and the name of your repository.

After pushing these changes you should see the badges displayed on your README: 🥳.

GitHub badges

Wrapping Up

If you are reading this from the beginning, I will name you a champion. 🍾

It has been a long trip, but hopefully interesting and fun to walk along with me!

Now it’s time to summarize what we have done here and try to extract some useful insights which will help us in our future development challenges.

I will layout below my opinion of what was the most challenging in building this application. And I will be even more eager to find out what is yours.

Rendering Performance

This really bit me in the beginning, when I was building the UI and was trying to implement the drawing of the price level rows.

I mentioned earlier how I have managed to solve it and I think this is going to be something I will remember for sure.

Grouping Functionality

Implementing this was also kind of challenging because there were several factors I had to take into account. Because of the market we are in and the range I had to do the calculations in.

It took me a while to polish it (remember the side mini project and the gist I shared in the previous sections) and I still think it could be improved even more. Try switching between the markets and the grouping values multiple times and observe the results.

Space for Improvement

One thing already mentioned is for sure the grouping. Which should also improve the visualizing of the red and green parts – they (almost) always should form a not ideal triangle.

If we try to look at the bigger picture, this order book application can be a part of a dashboard screen filled with other widgets as well, and they all can interact between them.

For example, changing the grouping of the order book to reflect on changing the views in the other widgets as well – say showing a market chart like this one below:

I am not even mentioning adding new markets as an improvement, as it’s kinda clear. But this should be taken into account when building the functionality for the current markets, as to do it in a way that will be easily extendable. So that adding a new market to the order book be a trivial and quick task to do.

I think that's all from me.

Thanks for reading! 🙏

References

Here are few links you might find useful to read:

The styled-components Happy Path

Blogged Answers: A (Mostly) Complete Guide to React Rendering Behavior

We'll start by talking about what state is, and then go through the many tools you can use to manage it.

We'll look at the simple useState hook and also learn about more complex libraries like Redux. Then we'll check out the most recent options available like Recoil and Zustand.

Table of Contents

• What is State in React?

• How to Use the UseState Hook

  • How to Use useEffect to Read State Updates

  • How to Pass a Callback to State Update Function

• Managing scale and complexity

  • React context

  • How to Use the UseReducer Hook

  • What About Redux?

• Alternatives to Redux

  • Redux toolkit

    • A mention for Redux Thunk and Redux Saga

  • Recoil

  • Jotai

  • Zustand

• Conclusion

What is state in React?

In modern React, we build our applications with functional components. Components are themselves JavaScript functions, independent and reusable bits of code.

The purpose of building the application with components is to have a modular architecture, with a clear separation of concerns. This makes code easier to understand, easier to maintain, and easier to reuse when possible.

The state is an object that holds information about a certain component. Plain JavaScript functions don't have the ability to store information. The code within them executes and "dissapears" once the execution is finished.

But thanks to state, React functional components can store information even after execution. When we need a component to store or "remember" something, or to act in a different way depending on the environment, state is what we need to make it work this way.

It's important to mention that not all components in a React app must have state. There are stateless components as well which just render its content without the need to store any information, and that's just fine.

Another important thing to mention is that state change is one of the two things that make a React component re-render (the other is a change in props). In this way, the state stores information about the component and also controls its behavior.

How to Use the UseState Hook

In order to implement state in our components, React provides us with a hook called useState. Let's see how it works with the following example.

We'll use the classic counter example, in which we're displaying a number and we have several buttons to increase, decrease, or reset that number.

This is a good example of an app where we need to store a piece of information and render something different every time that information changes.

The code for this app looks like this:

// App.js
import { useState } from 'react'

function App() {

  const [count, setCount] = useState(0)

  return (
    <div className="App">
      <p>Count is: {count}</p>

      <div>
        <button onClick={() => setCount(count+1)}>Add 1</button>
        <button onClick={() => setCount(count-1)}>Decrease 1</button>

        <button onClick={() => setCount(count+10)}>Add 10</button>
        <button onClick={() => setCount(count-10)}>Decrease 10</button>

        <button onClick={() => setCount(0)}>Reset count</button>
      </div>
    </div>
  )
}

export default App

• First we import the hook from React: import { useState } from 'react'

• Then we initialize the state: const [count, setCount] = useState(0)

Here we provide a variable name for the state (count) and a function name we'll use every time we need to update that state (setCount). Last, we set the initial value of the state (0), which will be the value loaded by default every time the app starts.

• Lastly, as mentioned above, every time we want to update the state we have to use the function we declared: setCount To use it, we just need to call it passing it the new state we want as a parameter. That is, if we want to add 1 to the previous estate, we call setCount(count+1).

As mentioned too, this will cause an update of the state and hence the re-render of the component. Which in our app means we'll see on the screen that the counter going up.

How to Use useEffect to Read State Updates

It's important to mention that the setState function is asynchronous. So if we try to read the state immediately after updating it, like this:

<button onClick={() => {
          setCount(count+1)
          console.log(count)
}}>Add 1</button>

we would get the previous value of the state, without the update.

The correct way of reading state after the update would be using the useEffect hook. It lets us execute a function after every component re-render (by default) or after any particular variable we declare changes.

Something like this:

useEffect(() => console.log(value), [value])

How to Pass a Callback to State Update Function

Also, the fact that useState is asynchronous has implications when considering very frequent and quick state changes.

Take, for example, the case of a user that presses the ADD button many times in a row, or a loop that emits a click event a certain number of times.

By updating state like setCount(count+1) we take the risk that count won't yet be updated when the next event is fired.

For example, let's say at the start count = 0. Then setCount(count+1) is called and the state is asynchronously updated. But then again setCount(count+1) is called, before the state update was completed. This means that still count = 0, which means that the second setCount won't update the state correctly.

A more defensive approach would be to pass setCount a callback, like so: setCount(prevCount => prevCount+1)

This makes sure that the value to update is the most recent one and keeps us away from the problem mentioned above. Every time we perform updates on a previous state we should use this approach.

Managing Scale and Complexity

So far, state management seems a piece of cake. We just need a hook, a value, and a function to update it, and we're ready to go.

But once apps start to get bigger and more complex, using only this may start to cause some problems.

React context

The first problem that may occur is when we have a lot of nested components, and we need many "sibling" components to share the same state.

The obvious answer here is to "lift" the state up, meaning that a parent component will be the one to hold the state and it will pass it as props to the children components.

This works just fine, but when we have a lot of nested components, we may need to pass props through many component levels. This is known as "prop drilling" and not only looks ugly but also creates code that's hard to maintain.

Prop drilling can also cause unnecessary re-renders which can affect the performance of our app. If between our parent component (which stores the state) and our children components (which consume the state) there are other components ("middle components"), we will need to pass props through these middle components too, even if they don't need the prop.

This means that these "middle components" will re-render when the prop changes, even if they have nothing different to render.

A solution to this is to use React context, which in short is a way to create a wrapper component that wraps around any group of components we want and can pass props directly to those components, without the need to "drill" through components that wont necessarily use that state.

The thing to watch when using context is that when the context state changes, all the wrapped components that receive that state will re-render. And this might not be necessary depending on the case and might cause performance issues, too.

So it's always important to balance whether we really need to make a state available to many components or whether we can just keep it local in a single component. And if we need to make it available to many components, is it really a good idea to put it in context or can we just lift it up a level.

Kent C Dodds has a cool article on this topic.

How to Use the UseReducer Hook

Another problem may come up when you're using useState where the new state to be set depends on the previous state (like our count example) or when state changes occur very frequently in our application.

In these occasions, useState may provoke some unexpected and unpredictable behavior. In come reducers to solve this problem.

A reducer is a pure function that takes the previous state and an action as an argument, and returns the next state. It's called a reducer because it's the same function type you could pass to an array: Array.prototype.reduce(reducer, initialValue).

useReducer is the hook Reacts provides that lets us implement reducers to manage our state. Using this hook, our previous example app would look like this:

// App.js
import { useReducer } from 'react'
import './App.scss'

function App() {

  function reducer(state, action) {
    switch (action.type) {
      case 'ADD': return { count: state.count + 1 }
      case 'SUB': return { count: state.count - 1 }
      case 'ADD10': return { count: state.count + 10 }
      case 'SUB10': return { count: state.count - 10 }
      case 'RESET': return { count: 0 }
      default: return state
    }
  }

  const [state, dispatch] = useReducer(reducer, { count: 0 })  

  return (
    <div className="App">
      <p>Count is: {state.count}</p>

      <div>
        <button onClick={() => dispatch({type: 'ADD'})}>Add 1</button>

        <button onClick={() => dispatch({type: 'SUB'})}>Decrease 1</button>

        <button onClick={() => dispatch({type: 'ADD10'})}>Add 10</button>
        <button onClick={() => dispatch({type: 'SUB10'})}>Decrease 10</button>

        <button onClick={() => dispatch({type: 'RESET'})}>Reset count</button>
      </div>
    </div>
  )
}

export default App

• Again we start by importing the hook from React: import { useReducer } from 'react'

• Then we'll declare a reducer function, which as parameters will take the current state and an action to perform on it. Within it, it will have a switch statement that will read the action type, execute the corresponding action on the state, and return the updated state.

It's common practice to use switch statements on reducers and capital letters to declare the actions. ;)

function reducer(state, action) {
    switch (action.type) {
      case 'ADD': return { count: state.count + 1 }
      case 'SUB': return { count: state.count - 1 }
      case 'ADD10': return { count: state.count + 10 }
      case 'SUB10': return { count: state.count - 10 }
      case 'RESET': return { count: 0 }
      default: return state
    }
  }

• Afterwards, it's time to declare our useReducer hook, which looks fairly similar to the useState hook. We declare a value for our state ('state' in our case), a function we'll use to modify it ('dispatch'), and then useReducer will take the reducer function as first parameter and the default state as second parameter.

const [state, dispatch] = useReducer(reducer, { count: 0 })

• Lastly, to update our state we won't call the reducer directly, but instead we'll call the function we just created ('dispatch'), passing it the corresponding action type we want to execute. Behind the scenes, the dispatch function will connect with the reducer and actually modify the state.

<button onClick={() => dispatch({type: 'ADD'})}>Add 1</button>

It's quite a bit more boilerplate than using useState, but useReducer isn't that complex after all.

To sum it up, we just need:

• A reducer, that is the function that will consolidate all possible state changes

• A dispatch function, that will send the modifying actions to the reducer.

The thing here is that the UI elements won't be able to update the state directly like they did before when calling setState with a value. Now they will have to call an action type and go through the reducer, which makes state management more modular and predictable. ;)

What About Redux?

Redux is a library that has been around for a long time and is widely used in the React environment.

Redux is a tool that comes to solve both of the problems mentioned before (prop drilling and unpredictable state behavior on frequent and complex state changes).

It's important to mention that Redux is an agnostic library, meaning it can be implemented on any front end app, not just React.

The Redux set of tools is very similar to what we've just seen with useReducer, but with a few more things. There are three main building blocks in Redux:

• A store — an object that holds the app state data

• A reducer — a function that returns some state data, triggered by an action type

• An action — an object that tells the reducer how to change the state. It must contain a type property, and it can contain an optional payload property

Implementing Redux, our example app would look like this:

// App.js
import './App.scss'

import { Provider, useSelector, useDispatch } from 'react-redux'
import { addOne, subOne, addSome, subSome, reset } from './store/actions/count.actions'

import store from './store'

function App() {

  const dispatch = useDispatch()
  const count = useSelector(state => state.count)

  return (
    <Provider store={store}>
      <div className="App">
        <p>Count is: {count}</p>

        <div>
          <button onClick={() => dispatch(addOne())}>Add 1</button>

          <button onClick={() => dispatch(subOne())}>Decrease 1</button>

          <button onClick={() => dispatch(addSome(10))}>Add 10</button>
          <button onClick={() => dispatch(subSome(10))}>Decrease 10</button>

          <button onClick={() => dispatch(reset())}>Reset count</button>
        </div>
      </div>
    </Provider>
  )
}

export default App

Besides, we now would need a new store directory, with its corresponding store, reducer, and actions files.

// index.js (STORE)
import { createStore } from 'redux'
import CountReducer from './reducers/count.reducer'

export default createStore(CountReducer)

// count.reducer.js
import { ADD, SUB, ADDSOME, SUBSOME, RESET } from '../actions/count.actions'

const CountReducer = (state = { count: 0 }, action) => {
    switch (action.type) {
      case ADD: return { count: state.count + 1 }
      case SUB: return { count: state.count - 1 }
      case ADDSOME: return { count: state.count + action.payload }
      case SUBSOME: return { count: state.count - action.payload }
      case RESET: return { count: 0 }
      default: return state
    }
}

export default CountReducer

// count.actions.js
export const ADD = 'ADD'
export const addOne = () => ({ type: ADD })

export const SUB = 'SUB'
export const subOne = () => ({ type: SUB })

export const ADDSOME = 'ADDSOME'
export const addSome = (value) => ({
    type: ADDSOME,
    payload: value
})

export const SUBSOME = 'SUBSOME'
export const subSome = (value) => ({
    type: SUBSOME,
    payload: value
})

export const RESET = 'RESET'
export const reset = () => ({ type: RESET })

This is a lot more boilerplate that what we've seen before (that's what Redux is mainly criticized for), so let's break it down into pieces:

• As I mentioned, Redux is an external library, so before anything we need to install it by running npm i redux react-redux. redux will bring the core functions we need to manage our state and react-redux will install some cool hooks to easily read and modify state from our components.

• Now, first thing is the store. In Redux the store is the entity that has all the app state information. Thanks to Redux, we'll be able to access the store from any component we want (just like with context).

To create a store, we import the createStore function and pass it a reducer as input.

Know that you can also combine different reducers and pass it to the same store in case you'd like to separate concerns into different reducers.

import { createStore } from 'redux'
import CountReducer from './reducers/count.reducer'

export default createStore(CountReducer)

• Then there's the reducer, which works exactly the same as the one we've seen with useReducer. It takes the default state and an action as parameters, then within it it has a switch statement to read the action type, execute the corresponding state modification, and return the updated state.

import { ADD, SUB, ADDSOME, SUBSOME, RESET } from '../actions/count.actions'

const CountReducer = (state = { count: 0 }, action) => {
    switch (action.type) {
      case ADD: return { count: state.count + 1 }
      case SUB: return { count: state.count - 1 }
      case ADDSOME: return { count: state.count + action.payload }
      case SUBSOME: return { count: state.count - action.payload }
      case RESET: return { count: 0 }
      default: return state
    }
}

export default CountReducer

• Then come the actions. Actions are what we're going to use to tell the reducer how to update the state. In the code you can see that for each action we're declaring constants to use them instead of plain strings (this is a good practice to improve maintainability), and functions that return either just a type or a type and a payload. These functions are what we're going to dispatch from our component in order to change the state. ;)

Note that I changed the example a bit in order to show what payload means when talking about actions. In case we want to pass a parameter from the component when we dispatch an action, payload is where that information will be.

In the example, you can see that we can now pass directly from the component the number we want to add/substract when we call ADDSOME/SUBSOME.

export const ADD = 'ADD'
export const addOne = () => ({ type: ADD })

export const SUB = 'SUB'
export const subOne = () => ({ type: SUB })

export const ADDSOME = 'ADDSOME'
export const addSome = value => ({
    type: ADDSOME,
    payload: value
})

export const SUBSOME = 'SUBSOME'
export const subSome = value => ({
    type: SUBSOME,
    payload: value
})

export const RESET = 'RESET'
export const reset = () => ({ type: RESET })

• And last comes our component. Here we have 3 things to notice:

1. First we have a provider component that receives store as props. This is what grants access to our store from all the components wrapped in it.

2. Then we have a hook called useDispatch() (that we'll use to dispatch actions) and another called useSelector() (that we'll use to read the state from the store).

3. Last, notice we're dispatching the functions we declared on the actions file, and passing a value as an input when it corresponds. This value is what the actions takes as payload and what the reducer is going to use to modify the state. ;)

import './App.scss'

import { useSelector, useDispatch } from 'react-redux'
import { addOne, subOne, addSome, subSome, reset } from './store/actions/count.actions'

function App() {

  const dispatch = useDispatch()
  const count = useSelector(state => state.count)

  return (
      <div className="App">
        <p>Count is: {count}</p>

        <div>
          <button onClick={() => dispatch(addOne())}>Add 1</button>

          <button onClick={() => dispatch(subOne())}>Decrease 1</button>

          <button onClick={() => dispatch(addSome(10))}>Add 10</button>
          <button onClick={() => dispatch(subSome(10))}>Decrease 10</button>

          <button onClick={() => dispatch(reset())}>Reset count</button>
        </div>
      </div>
  )
}

export default App

Redux is a nice tool that solves two problems at the same time (prop drilling and complex state changes). Still, it does generate a lot of boilerplate and makes state management a topic that's harder to get your head around, specially when dealing with different files and entities like actions, reducers, a store...

An important thing to mention here is that these tools or ways to manage state aren't mutually exclusive, they can and probably should be used at the same time, each to solve the specific problem they're good at.

In the case of Redux, that problem is handling global state (meaning state that affects your whole application or a very big part of it). It wouldn't make sense to use Redux to handle a counter like our example or the opening and closing of a modal.

A good golden rule is useState for component state, Redux for application state.

Alternatives to Redux

If this topic isn't yet complicated enough for you, in the last few years a lot of new libraries have come up as alternatives to Redux, each with its own approach to state management.

Just for the sake of getting a good overview, let's quickly get to know them.

Redux toolkit

Redux toolkit is a library built on top of Redux, which aims to take away some of the complexity and boilerplate that Redux generates.

Redux toolkit is built upon two things:

• A store, which works exactly the same as a plain Redux store

• And slices which condense plain Redux actions and reducers into a single thing

Implementing Redux Toolkit, our example app would look like this:

// App.js
import './App.scss'

import { useSelector, useDispatch } from 'react-redux'
import { addOne, subOne, addSome, subSome, reset } from './store/slices/count.slice'

function App() {

  const dispatch = useDispatch()
  const count = useSelector(state => state.counter.count)

  return (
      <div className="App">
        <p>Count is: {count}</p>

        <div>
          <button onClick={() => dispatch(addOne())}>Add 1</button>

          <button onClick={() => dispatch(subOne())}>Decrease 1</button>

          <button onClick={() => dispatch(addSome(10))}>Add 10</button>
          <button onClick={() => dispatch(subSome(10))}>Decrease 10</button>

          <button onClick={() => dispatch(reset())}>Reset count</button>
        </div>
      </div>
  )
}

export default App

// index.js
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import { Provider } from 'react-redux'
import store from './store/index'

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
)

// Index.jsx (STORE)
import { configureStore } from '@reduxjs/toolkit'
import counterReducer from './slices/count.slice'

export const store = configureStore({
  reducer: {
      counter: counterReducer
  },
})

export default store

// count.slice.jsx
import { createSlice } from '@reduxjs/toolkit'

const initialState = { count: 0 }

export const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    addOne: state => {state.count += 1},
    subOne: state => {state.count -= 1},
    addSome: (state, action) => {state.count += action.payload},
    subSome: (state, action) => {state.count -= action.payload},
    reset: state => {state.count = 0}
  },
})

export const { addOne, subOne, addSome, subSome, reset } = counterSlice.actions

export default counterSlice.reducer

• First we need to install it by running npm install @reduxjs/toolkit react-redux

• On our store we import the configureStore function from Redux toolkit, and create the store by calling this function and passing it an object with a reducer, which itself is an object that contains a slice.

export const store = configureStore({
  reducer: {
      counter: counterReducer
  },
})

• A slice, as I mentioned, is a way to condense actions and reducers into the same thing. We import the createSlice function from Redux toolkit, then declare the initial state and initialize the slice.

This one will receive as parameters the name of the slice, the initial state, and the functions we'll dispatch from our components in order to modify the state.

Notice there are no actions here. The UI will call the reducer functions directly. That's the complexity Redux toolkit "takes away".

export const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    addOne: state => {state.count += 1},
    subOne: state => {state.count -= 1},
    addSome: (state, action) => {state.count += action.payload},
    subSome: (state, action) => {state.count -= action.payload},
    reset: state => {state.count = 0}
  },
})

• On index.js we wrap our app around a provider component so that we can access state from anywhere.

    <Provider store={store}>
      <App />
    </Provider>

• And lastly, from our component we read the state and dispatch modification functions using hooks just like with plain Redux.

function App() {

  const dispatch = useDispatch()
  const count = useSelector(state => state.counter.count)

  return (
      <div className="App">
        <p>Count is: {count}</p>

        <div>
          <button onClick={() => dispatch(addOne())}>Add 1</button>

          <button onClick={() => dispatch(subOne())}>Decrease 1</button>

          <button onClick={() => dispatch(addSome(10))}>Add 10</button>
          <button onClick={() => dispatch(subSome(10))}>Decrease 10</button>

          <button onClick={() => dispatch(reset())}>Reset count</button>
        </div>
      </div>
  )
}

Redux toolkit aims to be a simpler way to deal with Redux, but in my opinion it's still almost the same boilerplate and not much of a difference with plain Redux.

A mention for Redux Thunk and Redux Saga

Redux thunk and Redux Saga are other two popular middleware libraries that are used together with Redux.

Specifically, both Thunk and Saga are meant to be used when dealing with side effects or assynchronous tasks.

Recoil

Recoil is an open source state management library specifically for React built by Facebook (or Meta, whatever...). According to their website, Recoil is built to be "minimal and reactish", in the sense that it looks and feels like plain React code.

Recoil is based upon the idea of atoms. Quoting their docs,

"An atom represents a piece of state. Atoms can be read from and written to from any component. Components that read the value of an atom are implicitly subscribed to that atom, so any atom updates will result in a re-render of all components subscribed to that atom".

Using Recoil, our example app would look like this:

// App.js
import countState from './recoil/counter.atom'
import './App.scss'

import { useRecoilState } from 'recoil'

function App() {

  const [count, setCount] = useRecoilState(countState)

  return (
      <div className="App">
        <p>Count is: {count}</p>

        <div>
          <button onClick={() => setCount(count+1)}>Add 1</button>

          <button onClick={() => setCount(count-1)}>Decrease 1</button>

          <button onClick={() => setCount(count+10)}>Add 10</button>
          <button onClick={() => setCount(count-10)}>Decrease 10</button>

          <button onClick={() => setCount(0)}>Reset count</button>
        </div>
      </div>
  )
}

export default App

// index.js
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import { RecoilRoot } from 'recoil'

ReactDOM.render(
  <React.StrictMode>
    <RecoilRoot>
      <App />
    </RecoilRoot>
  </React.StrictMode>,
  document.getElementById('root')
)

// counter.atom.jsx
import { atom } from 'recoil'

const countState = atom({
  key: 'countState', // unique ID (with respect to other atoms/selectors)
  default: 0 // default value (aka initial value)
})

export default countState

As you can probably immediately see, this is a lot less boilerplate than Redux. =D

• First we install it by running npm install recoil

• Components that use recoil state need RecoilRoot to appear somewhere in the parent tree. So we wrap our app with it.

  <React.StrictMode>
    <RecoilRoot>
      <App />
    </RecoilRoot>
  </React.StrictMode>

• Then we declare our atom, which is just an object containing a key and a default value:

const countState = atom({
  key: 'countState', // unique ID (with respect to other atoms/selectors)
  default: 0 // default value (aka initial value)
})

• Lastly, in our component we import the hook useRecoilState and declare our state with it, passing it the unique key we just declared in our atom.

const [count, setCount] = useRecoilState(countState)

As you can see, this looks really similar to a regular useState hook. Reactish... =P

And from our UI, we just call the setCount function to update our state.

<button onClick={() => setCount(count+1)}>Add 1</button>

Minimal, and very easy to use. Recoil is still kind of experimental and not that widely used, but you can see how devs around the world would turn to this tool.

Jotai

Jotai is an open source state management library built for React that is inspired by Recoil. It differs from Recoil in looking for an even more minimalistic API – it doesn't use string keys and it's TypeScript-oriented.

Same as with Recoil, Jotai uses atoms. An atom represents a piece of state. All you need is to specify an initial value, which can be primitive values like strings and numbers, objects and arrays. Then in your components you consume that atom, and on every atom change that component will re-render.

Using Jotai, our example app looks like this:

// App.js
import './App.scss'

import { useAtom } from 'jotai'

function App() {

  const [count, setCount] = useAtom(countAtom)

  return (
      <div className="App">
        <p>Count is: {count}</p>

        <div>
          <button onClick={() => setCount(count+1)}>Add 1</button>

          <button onClick={() => setCount(count-1)}>Decrease 1</button>

          <button onClick={() => setCount(count+10)}>Add 10</button>
          <button onClick={() => setCount(count-10)}>Decrease 10</button>

          <button onClick={() => setCount(0)}>Reset count</button>
        </div>
      </div>
  )
}

export default App

// counter.atom.jsx
import { atom } from 'jotai'

const countAtom = atom(0)

export default countAtom

As you can see, it's even more minimal than Recoil.

• We install it by running npm install jotai

• Then we declare an atom with a default value:

const countAtom = atom(0)

• And consume it with our component using useAtom:

const [count, setCount] = useAtom(countAtom)

Really nice and simple!

Zustand

Zustand is another open source state management library built for React. It's inspired by Flux, a library widely used before Redux came around, and it aims to be

"a small, fast non-opinionated and scalable barebones state-management solution with a comfy API based on hooks and almost no boilerplate".

Zustand uses a store in a similar way that Redux does, but with the difference that in Zustand the store is now a hook, and it takes far less boilerplate.

Using Zustand, our example app would look like this:

// App.js
import './App.scss'
import useStore from './store'

function App() {

  const count = useStore(state => state.count)
  const { addOne, subOne, add10, sub10, reset } = useStore(state => state)

  return (
      <div className="App">
        <p>Count is: {count}</p>

        <div>
            <button onClick={() => addOne()}>Add 1</button>

          <button onClick={() => subOne()}>Decrease 1</button>

          <button onClick={() => add10()}>Add 10</button>
          <button onClick={() => sub10()}>Decrease 10</button>

          <button onClick={() => reset()}>Reset count</button>
        </div>
      </div>
  )
}

export default App

// Index.jsx (STORE)
import create from 'zustand'

const useStore = create(set => ({
  count: 0,
  addOne: () => set(state => ({count: state.count += 1})),
  subOne: () => set(state => ({count: state.count -= 1})),
  add10: () => set(state => ({count: state.count += 10})),
  sub10: () => set(state => ({count: state.count -= 10})),
  reset: () => set({count: 0})
}))

export default useStore