Using Immer for Nested State Updates

import { createAction, createReducer } from '@reduxjs/toolkit';
import produce from 'immer';

// Define an action creator
const updateNestedValue = createAction('update/nestedValue');

// Initial state for the reducer
const initialState = {
  levelOne: {
    levelTwo: {
      levelThree: {
        myValue: 0
      }
    }
  }
};

// Create reducer using createReducer and Immer
const nestedValueReducer = createReducer(initialState, {
  [updateNestedValue]: (state, action) => {
    // Immer allows you to write code that 'mutates' the draft state
    // This mutation will result in a new immutable state object
    state.levelOne.levelTwo.levelThree.myValue = action.payload;
  }
});

This code snippet demonstrates the use of Redux Toolkit's createReducer function alongside Immer to produce a reducer that updates a deeply nested value in the state. An action called 'updateNestedValue' is created first. The initialState object has three levels of nested objects, ending with 'myValue' as the target property to update. The 'nestedValueReducer' is then defined with a mapping from the 'updateNestedValue' action to a reducer function that takes the current state and an action. Inside this reducer function, Immer's proxy-based draft state allows us to directly 'mutate' the nested 'myValue' property, which returns a new, immutably updated state containing the changes.