{"id":17902,"library":"redux-freeze","title":"Redux State Freeze Middleware","description":"Redux-freeze is a Redux middleware designed to prevent accidental state mutations within a Redux application by deeply freezing the state object after each dispatched action. This mechanism helps enforce the core Redux principle of immutability during development, throwing a runtime error if any part of the state is modified directly. It is intended strictly as a development-time tool to catch bugs early, as its deep freezing operation introduces performance overhead unsuitable for production environments. The package is currently at version 0.1.7. Based on the lack of recent activity and a last commit several years ago, the project appears to be abandoned, with no active release cadence. Its primary differentiator is its straightforward, single-purpose approach to ensuring immutability, making it a clear diagnostic tool for identifying unintentional side effects in state management.","status":"abandoned","version":"0.1.7","language":"javascript","source_language":"en","source_url":"https://github.com/buunguyen/redux-freeze","tags":["javascript","react","redux","flux","middleware","redux-middleware","freeze","immutability"],"install":[{"cmd":"npm install redux-freeze","lang":"bash","label":"npm"},{"cmd":"yarn add redux-freeze","lang":"bash","label":"yarn"},{"cmd":"pnpm add redux-freeze","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"The `redux-freeze` package exports a default function. For ES Modules, use the default import syntax without curly braces.","wrong":"import { freeze } from 'redux-freeze';","symbol":"freeze","correct":"import freeze from 'redux-freeze';"},{"note":"For CommonJS environments, the `require` statement directly imports the default exported function. Do not use destructuring.","wrong":"const { freeze } = require('redux-freeze');","symbol":"freeze","correct":"const freeze = require('redux-freeze');"},{"note":"The `freeze` middleware is typically used in conjunction with Redux's `applyMiddleware` function when creating your store. This is a standard Redux import, not specific to `redux-freeze`.","symbol":"applyMiddleware","correct":"import { createStore, applyMiddleware } from 'redux';"}],"quickstart":{"code":"import { createStore, applyMiddleware } from 'redux';\nimport freeze from 'redux-freeze'; // Or `const freeze = require('redux-freeze');` for CJS\n\n// A basic reducer to demonstrate state mutation\nconst initialState = {\n  user: {\n    name: 'Alice',\n    preferences: { theme: 'dark' }\n  },\n  items: []\n};\n\nfunction rootReducer(state = initialState, action) {\n  switch (action.type) {\n    case 'UPDATE_USER_NAME_MUTATE':\n      // This line intentionally mutates the state, which redux-freeze will catch\n      state.user.name = action.payload; \n      return state;\n    case 'ADD_ITEM':\n      return {\n        ...state,\n        items: [...state.items, action.payload]\n      };\n    default:\n      return state;\n  }\n}\n\n// Create the Redux store with redux-freeze middleware\n// In a real application, you would typically only apply this in development mode.\nconst store = createStore(rootReducer, applyMiddleware(freeze));\n\nconsole.log('Initial state:', store.getState());\n\ntry {\n  console.log('\\nAttempting to dispatch an action that mutates state...');\n  store.dispatch({ type: 'UPDATE_USER_NAME_MUTATE', payload: 'Bob' });\n} catch (error) {\n  console.error('ERROR: Caught expected state mutation error:', error.message);\n  // Expected: \"Cannot assign to read only property 'name' of object '#<Object>'\"\n}\n\nconsole.log('\\nDispatching an action that correctly updates state immutably...');\nstore.dispatch({ type: 'ADD_ITEM', payload: { id: 1, name: 'New Item' } });\n\nconsole.log('State after immutable update:', store.getState());\n\n// Demonstrating that the retrieved state is also frozen\ntry {\n  console.log('\\nAttempting to mutate state directly after retrieval...');\n  store.getState().user.preferences.theme = 'light';\n} catch (error) {\n  console.error('ERROR: Caught expected mutation error on retrieved state:', error.message);\n}\n","lang":"typescript","description":"This quickstart demonstrates how to integrate `redux-freeze` into a Redux store and shows how it catches both direct state mutations within reducers and mutations on state objects retrieved from the store."},"warnings":[{"fix":"Ensure `redux-freeze` is only included in your Redux middleware stack during development builds, typically guarded by `process.env.NODE_ENV !== 'production'` or a similar conditional check specific to your build setup.","message":"Using `redux-freeze` in production environments will incur significant performance overhead due to the deep freezing of the entire state tree on every `dispatch`. It is designed exclusively for development-time debugging.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"If performance in development becomes an issue, consider alternative immutability checks that might be less aggressive or optimize your Redux state structure to avoid excessive depth. For extreme cases, temporary disabling might be needed for specific development tasks.","message":"The middleware performs a deep freeze, which can be computationally intensive for applications with very large or deeply nested state objects. Even in development, this could lead to noticeable delays, impacting hot module replacement or developer experience.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Upgrade to version `0.1.7` or newer to ensure consistent state freezing behavior from the initial store setup and first dispatch.","message":"Older versions (prior to 0.1.7) contained a bug where the state might not be fully frozen before the very first dispatch, potentially allowing initial mutations to go undetected.","severity":"breaking","affected_versions":"<0.1.7"}],"env_vars":null,"last_verified":"2026-04-23T00:00:00.000Z","next_check":"2026-07-22T00:00:00.000Z","problems":[{"fix":"Always update Redux state immutably. Instead of `state.prop = newValue;`, create a new object or array with the updated values. For objects, use the spread operator: `{ ...state, prop: newValue }`. For arrays, use `[...state, newItem]` or `state.map(...)`.","cause":"This error occurs when you attempt to directly mutate a property of your Redux state object while `redux-freeze` middleware is active. The middleware makes the state immutable.","error":"TypeError: Cannot assign to read only property '...' of object '#<Object>'"},{"fix":"Ensure you are using the correct import syntax for a default export. For ES Modules, use `import freeze from 'redux-freeze';`. For CommonJS, use `const freeze = require('redux-freeze');`.","cause":"This error (or similar like 'freeze is not a function') typically indicates an incorrect import statement, often attempting a named import when the package provides a default export (common in ESM when using `import { freeze } from 'redux-freeze'`).","error":"TypeError: (0 , redux_freeze__WEBPACK_IMPORTED_MODULE_0__.default) is not a function"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}