{"id":17468,"library":"redux-debounced","title":"Redux Debounced Middleware","description":"Redux-debounced is a middleware for Redux designed to manage the dispatching of fast-paced actions. It enables developers to debounce actions by adding specific metadata to the action object, ensuring that the Redux state is updated only after a defined period of inactivity following the last dispatch of a particular action. This functionality is crucial for optimizing performance in scenarios like search input fields, where continuous user input could otherwise trigger an excessive number of API requests or state changes. The package is currently at version 0.5.0, with its last publish date in April 2018, which suggests it is in a maintenance state with no active development or regular release cadence. Its primary distinction lies in its direct integration within the Redux middleware chain, utilizing Flux Standard Actions (FSA) for configuration, offering an alternative to debouncing at the component level or within action creators.","status":"maintenance","version":"0.5.0","language":"javascript","source_language":"en","source_url":"https://github.com/ryanseddon/redux-debounce","tags":["javascript"],"install":[{"cmd":"npm install redux-debounced","lang":"bash","label":"npm"},{"cmd":"yarn add redux-debounced","lang":"bash","label":"yarn"},{"cmd":"pnpm add redux-debounced","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for Redux store and middleware functionality.","package":"redux","optional":false},{"reason":"Commonly used for debouncing asynchronous thunk actions.","package":"redux-thunk","optional":true}],"imports":[{"note":"The primary export is a default function that creates the middleware.","wrong":"import { createDebounce } from 'redux-debounced';","symbol":"createDebounce","correct":"import createDebounce from 'redux-debounced';"},{"note":"When using TypeScript, import 'Middleware' type from 'redux' for type definitions, especially for `createDebounce` return type.","symbol":"Middleware","correct":"import { Middleware } from 'redux';"},{"note":"Standard named imports for Redux core utilities. CommonJS 'require' style is outdated for modern Redux setups.","wrong":"const createStore = require('redux').createStore;","symbol":"createStore, applyMiddleware","correct":"import { createStore, applyMiddleware } from 'redux';"}],"quickstart":{"code":"import { createStore, applyMiddleware, combineReducers } from 'redux';\nimport type { Action, Middleware } from 'redux';\nimport createDebounce from 'redux-debounced';\nimport thunkMiddleware from 'redux-thunk';\n\n// Minimal reducer for example\ninterface AppState { searchKey: string; };\nconst initialState: AppState = { searchKey: '' };\nconst rootReducer = (state: AppState = initialState, action: Action): AppState => {\n  switch (action.type) {\n    case 'TRACK_CUSTOMER_SEARCH':\n      console.log('Reducer received TRACK_CUSTOMER_SEARCH with key:', (action as any).key);\n      return { ...state, searchKey: (action as any).key };\n    default:\n      return state;\n  }\n};\n\n// Action creator for a debounced thunk\ninterface DebouncedThunkAction extends Action {\n  meta?: { debounce?: { time: number; key: string; } };\n  (dispatch: Function, getState: Function): void;\n}\n\nexport function trackCustomerSearch(key: string): DebouncedThunkAction {\n  const thunk = ((dispatch: Function) => {\n    console.log(`Simulating API call for key: ${key}`);\n    dispatch({ type: 'TRACK_CUSTOMER_SEARCH', key });\n  }) as DebouncedThunkAction;\n\n  thunk.meta = {\n    debounce: {\n      time: 2500, // Debounce for 2.5 seconds\n      key: 'TRACK_CUSTOMER_SEARCH' // Must specify a key for thunks\n    }\n  };\n  return thunk;\n}\n\n// Create the Redux store with middleware\nconst store = createStore(\n  rootReducer,\n  applyMiddleware(createDebounce() as Middleware, thunkMiddleware)\n);\n\n// Dispatch debounced actions\nconsole.log('Dispatching search 1 (will be cancelled)');\nstore.dispatch(trackCustomerSearch('apple'));\n\nsetTimeout(() => {\n  console.log('Dispatching search 2 (will trigger after 2.5s from now)');\n  store.dispatch(trackCustomerSearch('apricot'));\n}, 500);\n\nsetTimeout(() => {\n  console.log('Dispatching search 3 (will trigger after 2.5s from now, cancelling previous)');\n  store.dispatch(trackCustomerSearch('orange'));\n}, 1000);","lang":"typescript","description":"This quickstart demonstrates how to set up `redux-debounced` middleware with `redux-thunk` and dispatch debounced actions, including how to configure a unique key for thunks to enable proper debouncing and cancellation."},"warnings":[{"fix":"Ensure `createDebounce()` is listed before `thunkMiddleware` in `applyMiddleware`. Add a unique `key` property within `action.meta.debounce` for all debounced thunks.","message":"When using `redux-debounced` with `redux-thunk`, the `createDebounce` middleware must be applied *before* `thunkMiddleware` in the `applyMiddleware` chain. Additionally, thunks require a `meta.debounce.key` property to be explicitly defined, as thunks do not have a standard 'type' property for the middleware to identify them.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Be aware of this behavior and design your action flow accordingly. If further side effects are needed after a cancellation, dispatch a separate, non-debounced action specifically for those effects.","message":"A 'cancel' action, specified by `meta.debounce.cancel: true`, will terminate within the `redux-debounced` middleware. It will not propagate further down the middleware chain, appear in Redux DevTools, or trigger any other side effects from subsequent middleware or reducers. This means you cannot 'piggyback' a cancel on another action that is expected to have further effects.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Consider alternatives like debouncing in action creators using `lodash.debounce` or `redux-saga`'s `debounce` effect, especially when using Redux Toolkit. If using `redux-debounced`, thoroughly test compatibility with your current stack.","message":"The `redux-debounced` package has not been updated since April 2018. While it may still function with older Redux setups, its lack of recent maintenance means it may not be compatible with newer Redux Toolkit patterns or the latest versions of React and Node.js without potential issues.","severity":"deprecated","affected_versions":">=0.5.0"}],"env_vars":null,"last_verified":"2026-04-22T00:00:00.000Z","next_check":"2026-07-21T00:00:00.000Z","problems":[{"fix":"Ensure actions adhere to the Flux Standard Action (FSA) pattern with a `meta` object containing a `debounce` object, which itself has a `time` property (e.g., `{ type: 'MY_ACTION', meta: { debounce: { time: 300 } } }`).","cause":"The `meta.debounce` property is either missing from the action, or its structure is incorrect (e.g., `time` is not a number, or `debounce` is not directly under `meta`).","error":"Actions are not debouncing as expected; multiple actions of the same type are dispatched rapidly."},{"fix":"When setting up middleware, ensure `createDebounce()` comes before `thunkMiddleware` (e.g., `applyMiddleware(createDebounce(), thunkMiddleware)`). For thunks, always include `thunk.meta = { debounce: { time: 500, key: 'UNIQUE_THUNK_KEY' } };`.","cause":"This typically occurs if the `createDebounce` middleware is applied after `redux-thunk` middleware, or if a unique `key` is not specified within the `meta.debounce` object for the thunk.","error":"Redux Thunks are not being debounced, or debounced thunks are not executing at all."},{"fix":"Verify that all actions intended to be debounced conform to the expected FSA `meta.debounce` structure. If non-debounced actions are accidentally being processed, ensure your action creators correctly attach the `meta` object only when needed, or defensively check for its existence in custom middleware.","cause":"This error often indicates that an action without a `meta` object or a `meta.debounce` object is being processed, and the middleware attempts to access properties that don't exist.","error":"TypeError: Cannot read properties of undefined (reading 'debounce') in redux-debounced middleware."}],"ecosystem":"npm","meta_description":null}