Immutable State Management

Leverage libraries like Immer in reducers to work with the Redux store's state in a type-safe manner, preventing accidental mutations and type inconsistencies.
import { createStore } from 'redux';
import produce from 'immer';

// Example state
const initialState = {
    user: {
        name: 'Anonymous',
        preferences: {}

// Action Types

// Action Creators
function updateUserName(newName) {
    return {
        type: UPDATE_USER_NAME,
        payload: newName

// Reducer with Immer for immutability
const rootReducer = produce((draft, action) => {
    switch (action.type) {
        case UPDATE_USER_NAME:
   = action.payload;
        // You can handle other actions here
}, initialState);

// Store creation
const store = createStore(rootReducer);

// Dispatch an action to update state
store.dispatch(updateUserName('John Doe'));
This code sets up a Redux store with an initial state and a single action to update a user's name. It uses Immer's produce function to enforce immutable state management within the reducer.
<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <title>Immutable State Management</title>
    <script src=""></script>
    <script src=""></script>
    <div id="app">
        <!-- This is where your React components would go in a real app -->
        <h1>User Name: <span id="userNameDisplay">Anonymous</span></h1>
        <button id="updateUserNameBtn">Change User Name</button>
    <script src="./app.js"></script>
This is the HTML template that contains a simple UI for displaying the user's name and a button to trigger the name change. The actual state management is handled in the linked JavaScript file 'app.js'. The script tags include Redux and Immer libraries.
document.getElementById('updateUserNameBtn').addEventListener('click', function() {
    // This could trigger a new action dispatch in your actual implementation
    store.dispatch(updateUserName('Jane Smith'));
    document.getElementById('userNameDisplay').textContent = store.getState();
This JavaScript code adds a click event listener to the button in the HTML template that dispatches the `updateUserName` action to the Redux store. Then it updates the displayed user's name in the HTML with the new value from the store's state.
body {
    font-family: Arial, sans-serif;

#app {
    text-align: center;
    margin-top: 20px;

button {
    padding: 10px 15px;
    font-size: 16px;
This CSS defines the basic styles for the HTML template. It includes font styles, alignment, and button styling to make the simple UI more visually appealing.