Redux Toolkit vs. Plain Redux: How Immer Transforms State Management

Smit Patel — Sat, 14 Sep 2024 10:23:07 +0000

As modern web applications grow in complexity, managing state efficiently becomes paramount. Redux has long been the go-to library for state management in React applications, offering a predictable and centralized way to handle state changes. However, as applications scale, developers often encounter challenges, especially when dealing with deeply nested state structures. This is where Redux Toolkit (RTK) which uses library called Immer come into play, revolutionizing how state is managed and updated. In this blog post, we'll explore the differences between Plain Redux and Redux Toolkit, delve into how Immer enhances state management, and demonstrate strategies to resolve common inefficiencies, ensuring your applications remain performant and maintainable.

Understanding Redux, Redux Toolkit (RTK), and Immer

Before diving into the complexities, it's essential to grasp what are these topics?

What is Redux?

Redux is a state management library for JavaScript applications that provides a centralized store for managing the state of an app. It follows a predictable state container model where actions are dispatched to trigger state changes, and reducers are used to define how the state transitions in response to those actions. Redux enforces immutability and a unidirectional data flow, which makes debugging easier and state transitions predictable.

What is Redux Toolkit (RTK)?

Redux Toolkit (RTK) is an abstraction built on top of Redux that simplifies its usage by reducing boilerplate and making common tasks easier. RTK provides convenient functions like createSlice for generating actions and reducers in one go, and createAsyncThunk for handling asynchronous logic (like API calls). It offers tools to manage state efficiently without having to manually set up actions, reducers, and middleware, streamlining the setup process for new Redux projects.

What is Immer in RTK?

Immer is integrated into RTK and allows you to write reducers in a way that looks like you're directly modifying the state (i.e., mutating it), but under the hood, it ensures the state is updated immutably. This helps developers avoid the need for manually copying and updating the state, making reducers much simpler and more intuitive to write while still adhering to Redux's immutability principles.

The Challenge of Deeply Nested States

Managing deeply nested states can introduce performance challenges, primarily due to the overhead of ensuring immutability. In complex applications, state often comprises multiple layers of nested objects and arrays, representing various entities and their relationships. Let’s explore how both Plain Redux and Redux Toolkit handle these challenges, ensuring efficient and maintainable state management.

Example of a Deeply Nested State Structure
Consider the following sportsInitialState, representing a complex and deeply nested state:

const sportsInitialState = {
  league: {
    name: 'Premier League',
    teams: [
      {
        id: 1,
        name: 'Red Warriors',
        players: [
          { id: 101, name: 'Alice', stats: { goals: 10, assists: 5 } },
          { id: 102, name: 'Bob', stats: { goals: 5, assists: 10 } },
        ],
      },
      {
        id: 2,
        name: 'Blue Knights',
        players: [
          { id: 201, name: 'Charlie', stats: { goals: 2, assists: 3 } },
          { id: 202, name: 'Dana', stats: { saves: 50, cleanSheets: 5 } },
        ],
      },
    ],
    matches: [
      {
        id: 1001,
        date: '2024-04-01',
        homeTeam: 1,
        awayTeam: 2,
        score: { home: 3, away: 2 },
      },
    ],
  },
  userPreferences: {
    theme: 'light',
    notifications: { email: true, sms: false, push: true },
  },
};

In this structure the league object contains teams, each with a list of players, and each player has stats. There's also a separate userPreferences object, independent of the league. Managing updates in such a deeply nested state can quickly become cumbersome and error-prone without the right tools.

Comparing Plain Redux and Redux Toolkit

To understand the impact of using Redux Toolkit versus Plain Redux, let's compare how each handles updating a deeply nested state, specifically updating a player's goals.

Plain Redux: Manual State Updates

Before Redux Toolkit, updating deeply nested states in plain Redux often required manually spreading and reconstructing objects. This method is verbose and inefficient, especially for complex state trees.

Reducer Example Without Immer

const sportsInitialState = {
  league: {
    teams: [
      { id: 1, name: 'Team A', players: [/* player list */] },
      { id: 2, name: 'Team B', players: [/* player list */] },
    ],
  },
  userPreferences: { theme: 'dark', notifications: true },
};

const reducer = (state = sportsInitialState , action) => {
  switch (action.type) {
    case 'UPDATE_PLAYER_GOALS':
      return {
        ...state,
        league: {
          ...state. League,
          teams: state.league.teams.map(team =>
            team.id === action.payload.teamId
              ? {
                  ...team,
                  players: team.players.map(player =>
                    player.id === action.payload.playerId
                      ? { ...player, stats: { ...player.stats, goals: action.payload.goals } }
                      : player
                  ),
                }
              : team
          ),
        },
      };
    default:
      return state;
  }
};

The Plain Redux approach presents several challenges. First, it is verbose, requiring manual spreading of each level of the state, which increases code complexity and length. Second, it introduces performance overhead, as new references are created for all nested objects, even those that haven't changed, leading to unnecessary re-renders and higher memory usage. Lastly, it is error-prone, as managing deeply nested structures manually increases the likelihood of mistakes.

Redux Toolkit(Immer): Simplified State Updates

With Redux Toolkit, updating deeply nested states becomes more straightforward and efficient. Immer allows you to write code that "mutates" the state directly, but under the hood, it ensures immutability by only updating the necessary parts.

Reducer Example with Redux Toolkit and Immer

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

const sportsSlice = createSlice({
  name: 'sports',
  initialState: sportsInitialState,
  reducers: {
    updatePlayerStats(state, action) {
      const { teamId, playerId, newGoals } = action. Payload;
      const team = state.league.teams.find(t => t.id === teamId);
      if (team) {
        const player = team.players.find(p => p.id === playerId);
        if (player) {
          player.stats.goals = newGoals;
        }
      }
    },
  },
});

export const { updatePlayerStats } = sportsSlice.actions;
export default sportsSlice.reducer;

The advantages of Redux Toolkit(Immer) are clear. First, it offers conciseness, with reducers being more compact and easier to understand. Second, it improves performance efficiency by ensuring that only the modified parts of the state get new references through Immer's structural sharing, which helps prevent unnecessary re-renders. Lastly, it reduces error-proneness, as the need for manual state spreading is minimized, lowering the chance of introducing bugs.

Data Flow: From Dispatching Actions to Getting Data with useSelector

One of the critical areas where Plain Redux can lead to performance issues is in how components interact with the Redux store, particularly when dispatching actions and selecting state data. Let's delve into how this flow works in both Plain Redux and Redux Toolkit(Immer), highlighting how RTK helps in preventing unnecessary re-renders.

Plain Redux: Dispatching Actions and useSelector Leading to Unnecessary Re-renders

In Plain Redux, the flow from dispatching an action to retrieving state data using useSelector can sometimes result in components re-rendering unnecessarily, even when they don't rely on the changed parts of the state.

Flow in Plain Redux

A component dispatches an action to update the state.

const updatePlayerGoals = (teamId, playerId, goals) => ({
  type: 'UPDATE_PLAYER_GOALS',
  payload: { teamId, playerId, goals },
});

import { useDispatch } from 'react-redux';

const UpdateGoalsComponent = () => {
  const dispatch = useDispatch();

  const handleUpdateGoals = () => {
    dispatch(updatePlayerGoals(1, 101, 12));
  };

  return <button onClick={handleUpdateGoals}>Update Goals</button>;
};

The reducer processes the action and returns a new state with updated values.

const reducer = (state = sportsInitialState , action) => {
  switch (action.type) {
    case 'UPDATE_PLAYER_GOALS':
      return {
        ...state,
        league: {
          ...state.league,
          teams: state.league.teams.map(team =>
            team.id === action.payload.teamId
              ? {
                  ...team,
                  players: team.players.map(player =>
                    player.id === action.payload.playerId
                      ? { ...player, stats: { ...player.stats, goals: action.payload.goals } }
                      : player
                  ),
                }
              : team
          ),
        },
      };
    default:
      return state;
  }
};

Components use useSelector to access specific parts of the state.

import { useSelector } from 'react-redux';

const PlayerStatsComponent = () => {
  const playerStats = useSelector(state => {
    const team = state.league.teams.find(t => t.id === 1);
    const player = team.players.find(p => p.id === 101);
    return player. Stats;
  });

  return (
    <div>
      <p>Goals: {playerStats.goals}</p>
      <p>Assists: {playerStats.assists}</p>
    </div>
  );
};

const UserPreferencesComponent = () => {
  const theme = useSelector(state => state.userPreferences.theme);

  return <div>Current Theme: {theme}</div>;
};

In Plain Redux, one major issue is unnecessary re-renders. For instance, when the state updates (e.g., you update a player's goals in the league object), the entire league object gets a new reference. This means that any component connected to the Redux store, even if it's not directly related to the updated part of the state, will detect that the state has changed due to the new reference.

Take the UserPreferencesComponent, for example. Although it only depends on the userPreferences part of the state, it might still re-render when a completely unrelated update, like the player's goals in the league object, occurs. This happens because the root state object now has a new reference, causing any component that subscribes to the store to re-evaluate its selector, even though the userPreferences slice itself hasn't changed.

The second issue relates to performance overhead. In large applications with complex state trees, frequent re-renders—especially when many components are connected to different slices of the state—can degrade overall performance. Unnecessary re-renders can waste CPU cycles and make the application less responsive, ultimately affecting the user experience, particularly as the application scales in complexity.

Redux Toolkit(Immer): Preventing Unnecessary Re-renders

Redux Toolkit leverages Immer to optimize state updates, ensuring that only the parts of the state that have changed receive new references. This structural sharing mechanism is crucial in preventing unnecessary re-renders of components that depend on unaffected parts of the state.

Flow in Redux Toolkit(Immer)

Similar to Plain Redux, a component dispatches an action to update the state.

// Action Creator is automatically generated by createSlice
const UpdateGoalsComponent = () => {
  const dispatch = useDispatch();

  const handleUpdateGoals = () => {
    dispatch(updatePlayerStats({ teamId: 1, playerId: 101, newGoals: 12 }));
  };

  return <button onClick={handleUpdateGoals}>Update Goals</button>;
};

The reducer, defined using createSlice, allows direct mutation of the draft state. Immer handles the immutability and structural sharing.

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

const sportsSlice = createSlice({
  name: 'sports',
  initialState: sportsInitialState,
  reducers: {
    updatePlayerStats(state, action) {
      const { teamId, playerId, newGoals } = action.payload;
      const team = state.league.teams.find(t => t.id === teamId);
      if (team) {
        const player = team.players.find(p => p.id === playerId);
        if (player) {
          player.stats.goals = newGoals;
        }
      }
    },
  },
});

export const { updatePlayerStats } = sportsSlice.actions;
export default sportsSlice.reducer;

Components using useSelector only re-render if the specific slice they depend on has changed.

import { useSelector } from 'react-redux';

const PlayerStatsComponent = () => {
  const playerStats = useSelector(state => {
    const team = state.sports.league.teams.find(t => t.id === 1);
    const player = team.players.find(p => p.id === 101);
    return player.stats;
  });

  return (
    <div>
      <p>Goals: {playerStats.goals}</p>
      <p>Assists: {playerStats.assists}</p>
    </div>
  );
};

const UserPreferencesComponent = () => {
  const theme = useSelector(state => state.userPreferences.theme);

  return <div>Current Theme: {theme}</div>;
};

One of the key advantages of Redux Toolkit (RTK) with Immer is its ability to enable selective re-renders. Thanks to Immer’s structural sharing, only the specific parts of the state that have been changed—such as player.stats.goals and its parent objects (player, players array, team, teamsarray, and league) receive new references. Meanwhile, parts of the state that remain unchanged, like the userPreferences object, retain their original references. This ensures that components relying on those untouched parts of the state, such as the UserPreferencesComponent, do not unnecessarily re-render, as their slice of the state has not been affected by the change.

Another significant advantage is performance efficiency. By preventing unnecessary re-renders, RTK with Immer ensures that only the impacted portions of the state are updated. This optimization helps applications scale more effectively, reducing the performance overhead associated with frequent and redundant state updates. As a result, the application runs smoother, providing a better user experience even as it grows in complexity.

Finally, cleaner code is a natural outcome of using RTK with Immer. Reducers become more concise and readable, eliminating the need for developers to manually manage state immutability. This reduces the cognitive load on developers, as they no longer need to worry about accidentally mutating the state. Additionally, this approach minimizes the risk of introducing bugs, leading to more maintainable and less error-prone code.

What Happens Under the Hood: How Immer Optimizes State Updates

Understanding the inner workings of Immer is crucial to appreciating its significant role in enhancing state management within Redux Toolkit (RTK). Immer seamlessly transforms your mutable code into efficient immutable updates, ensuring both simplicity and performance. Let's delve into how Immer achieves this optimization.

When you write what appears to be mutable code inside a reducer—for example, directly assigning a new value to a deeply nested property like player.stats.goals = newGoals. Immer steps in to handle the complexities of immutability behind the scenes. Instead of creating a complete copy of the entire state object every time a change occurs, Immer generates a draft version of the current state. This draft acts as a temporary, mutable version of your state, allowing you to make direct changes without worrying about breaking Redux's immutability principles.

As you modify the draft, Immer employs JavaScript's powerful Proxy feature to meticulously track which parts of the state are being altered. This tracking mechanism ensures that only the specific sections of the state that you've changed are updated. For instance, if you update a player's goals, Immer recognizes that only the stats. Goals property of that particular player has been modified.

One of the most impressive aspects of Immer is its use of structural sharing. Instead of cloning the entire state tree, Immer intelligently creates new copies only for the objects along the path to the changed property. In our example, updating player.stats.goals triggers Immer to create a new stats object for that player with the updated goals. Subsequently, it generates a new player object that references this new stats object. This process continues upward, resulting in a new players array that includes the updated player, a new team object that references the updated players array, and ultimately a new teams array and a new league object that incorporate these changes.

Crucially, all other parts of the state that remain unchanged retain their original references. This means that components connected to unrelated parts of the state, such as userPreferences, do not re-render unnecessarily because their referenced objects haven't changed. Immer's ability to limit updates to only the affected parts of the state significantly reduces the performance overhead and prevents needless re-renders, ensuring that your application remains efficient even as it scales.

Once all modifications are made to the draft, Immer finalizes the update by replacing the old state with the new state that includes only the necessary changes. This meticulous approach guarantees optimal performance by avoiding the creation of redundant copies of the state and minimizing memory usage.

In summary, Immer enhances Redux Toolkit by allowing developers to write straightforward, mutable code while efficiently managing immutable state updates. Its intelligent tracking and structural sharing ensure that only the necessary parts of the state are updated, thereby preventing unnecessary re-renders and maintaining high performance in complex applications.

"State management is the invisible thread that weaves together the logic of modern applications. It’s not just about handling data, it's about creating a structure where complexity can thrive without chaos."

I hope this article provided clarity on state management and the advantages of using Redux Toolkit. Your feedback is invaluable!

DEV Community: Smit Patel

in depth explaination of immer.