redux-freeze

import { createStore, applyMiddleware } from 'redux'; import freeze from 'redux-freeze'; // Or `const freeze = require('redux-freeze');` for CJS // A basic reducer to demonstrate state mutation const initialState = { user: { name: 'Alice', preferences: { theme: 'dark' } }, items: [] }; function rootReducer(state = initialState, action) { switch (action.type) { case 'UPDATE_USER_NAME_MUTATE': // This line intentionally mutates the state, which redux-freeze will catch state.user.name = action.payload; return state; case 'ADD_ITEM': return { ...state, items: [...state.items, action.payload] }; default: return state; } } // Create the Redux store with redux-freeze middleware // In a real application, you would typically only apply this in development mode. const store = createStore(rootReducer, applyMiddleware(freeze)); console.log('Initial state:', store.getState()); try { console.log('\nAttempting to dispatch an action that mutates state...'); store.dispatch({ type: 'UPDATE_USER_NAME_MUTATE', payload: 'Bob' }); } catch (error) { console.error('ERROR: Caught expected state mutation error:', error.message); // Expected: "Cannot assign to read only property 'name' of object '#<Object>'" } console.log('\nDispatching an action that correctly updates state immutably...'); store.dispatch({ type: 'ADD_ITEM', payload: { id: 1, name: 'New Item' } }); console.log('State after immutable update:', store.getState()); // Demonstrating that the retrieved state is also frozen try { console.log('\nAttempting to mutate state directly after retrieval...'); store.getState().user.preferences.theme = 'light'; } catch (error) { console.error('ERROR: Caught expected mutation error on retrieved state:', error.message); }