{"id":17117,"library":"redux-cookies-middleware","title":"Redux Cookies Middleware","description":"Redux Cookies Middleware is a specialized Redux middleware designed to synchronize specific parts of a Redux state tree with browser cookies. Developers configure `paths` to indicate which state subsets, using dot-notation, should be persisted, along with their corresponding cookie names. It also offers `getStateFromCookies` to hydrate the initial Redux state from existing cookies, ensuring state continuity across sessions. The current stable version is 0.2.1. However, the project appears to be abandoned, with its last commit occurring in November 2018 and no significant updates since, which means it likely does not support modern Redux Toolkit patterns or ESM-only environments directly. Its primary differentiation lies in its explicit, configurable mapping of state paths to individual cookies, offering fine-grained control over what data is stored on the client side.","status":"abandoned","version":"0.2.1","language":"javascript","source_language":"en","source_url":"https://github.com/grofers/redux-cookies-middleware","tags":["javascript","redux","cookies","middleware","react"],"install":[{"cmd":"npm install redux-cookies-middleware","lang":"bash","label":"npm"},{"cmd":"yarn add redux-cookies-middleware","lang":"bash","label":"yarn"},{"cmd":"pnpm add redux-cookies-middleware","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"The library primarily uses ES Module syntax in its documentation, but older Node.js environments or tooling might require CommonJS.","wrong":"const reduxCookiesMiddleware = require('redux-cookies-middleware');","symbol":"reduxCookiesMiddleware","correct":"import reduxCookiesMiddleware from 'redux-cookies-middleware';"},{"note":"This utility is imported from a submodule, not directly from the main package export. It's used to rehydrate state from cookies.","wrong":"const getStateFromCookies = require('redux-cookies-middleware/getStateFromCookies');","symbol":"getStateFromCookies","correct":"import getStateFromCookies from 'redux-cookies-middleware/getStateFromCookies';"},{"note":"The `paths` object is a crucial configuration for both `reduxCookiesMiddleware` and `getStateFromCookies`, defining which state slices map to which cookie names. It's not a direct import but a fundamental configuration pattern.","symbol":"Paths Configuration Object","correct":"const paths = { 'auth.token': { name: 'my_app_token' } };"}],"quickstart":{"code":"import { applyMiddleware, createStore, compose } from 'redux';\nimport reduxCookiesMiddleware from 'redux-cookies-middleware';\nimport getStateFromCookies from 'redux-cookies-middleware/getStateFromCookies';\n\n// A dummy reducer for demonstration purposes\nconst reducer = (state = {}, action) => {\n  switch (action.type) {\n    case 'SET_AUTH_TOKEN':\n      return { ...state, auth: { ...state.auth, token: action.payload } };\n    case 'SET_SESSION':\n      return { ...state, session: action.payload };\n    default:\n      return state;\n  }\n};\n\n// Initial state structure\nlet initialState = {\n  auth: {\n    token: null,\n    key: 'some_key'\n  },\n  session: null\n};\n\n// Define which parts of the state to persist in cookies and their cookie names\nconst paths = {\n  'auth.token': { name: 'my_app_token' },\n  'session': { name: 'my_app_session', httpOnly: false, secure: process.env.NODE_ENV === 'production' }\n};\n\n// Read stored data from cookies and merge it with the initial state\n// This should happen before creating the store to ensure initial state is hydrated.\ninitialState = getStateFromCookies(initialState, paths);\n\n// Create Redux store with the middleware\nconst store = createStore(\n  reducer,\n  initialState,\n  applyMiddleware(reduxCookiesMiddleware(paths))\n);\n\n// Example dispatch to demonstrate persistence\nstore.dispatch({ type: 'SET_AUTH_TOKEN', payload: 'new-auth-token-123' });\nstore.dispatch({ type: 'SET_SESSION', payload: 'user-session-abc' });\n\nconsole.log('Store state after dispatches:', store.getState());\n// In a browser, you would now see 'my_app_token' and 'my_app_session' cookies.\n// For Node.js, this example would require a cookie-aware environment or mocking.","lang":"javascript","description":"This quickstart demonstrates how to set up `redux-cookies-middleware` to persist specific parts of the Redux state ('auth.token' and 'session') into browser cookies, and how to hydrate the initial state from those cookies upon application load."},"warnings":[{"fix":"Evaluate alternatives like `redux-persist` or implement custom cookie logic for state persistence in modern applications.","message":"The `redux-cookies-middleware` project appears to be abandoned, with no commits since November 2018. This means it may not be compatible with newer versions of React, Redux, or modern JavaScript build toolchains (e.g., ESM-only environments). Consider using a more actively maintained state persistence library.","severity":"breaking","affected_versions":"<=0.2.1"},{"fix":"Thoroughly test state hydration logic when upgrading from versions prior to 0.2.0 to ensure expected behavior, especially with complex initial state structures or diverse cookie values.","message":"Version 0.2.0 introduced a 'full re-write' of the `getStoreFromCookies` API. Although noted as 'non breaking', significant internal changes can sometimes lead to subtle behavioral differences or edge-case regressions not immediately apparent.","severity":"gotcha","affected_versions":">=0.2.0"},{"fix":"Use constants for path strings where possible, and ensure robust testing of cookie persistence logic whenever your Redux state shape evolves.","message":"The library explicitly uses dot-notation strings to define paths for state serialization. This pattern can be fragile if your Redux state shape frequently changes or if refactoring renames deeply nested keys.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Ensure custom `equalityCheck` and `deleteCheck` functions are pure, performant, and thoroughly tested, especially when dealing with complex data structures. Leverage a reliable deep equality checker if necessary (e.g., `lodash.isequal`).","message":"The `paths` configuration allows custom `equalityCheck` and `deleteCheck` functions. If these functions are not robust or introduce side effects, they could lead to unexpected cookie updates or deletions, or performance issues.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-22T00:00:00.000Z","next_check":"2026-07-21T00:00:00.000Z","problems":[{"fix":"Upgrade to `redux-cookies-middleware` v0.2.0 or higher to utilize the fixed, non-mutating `getStateFromCookies` implementation.","cause":"Prior to v0.2.0, `getStateFromCookies` could directly mutate the `initialState` object passed to it when merging cookie data.","error":"Redux state is unexpectedly mutated after initial load during hydration from cookies."},{"fix":"Upgrade to `redux-cookies-middleware` v0.2.0 or higher, which includes improved error handling and robustness when attempting to parse potentially malformed JSON cookie values.","cause":"`redux-cookies-middleware` attempted to JSON parse cookie values that were not valid JSON strings (e.g., simple strings or corrupted data), leading to parsing errors.","error":"SyntaxError: Unexpected token <character> in JSON at position <number> when reading cookies."}],"ecosystem":"npm","meta_description":null}