{"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.","language":"javascript","status":"maintenance","last_verified":"Wed Apr 22","install":{"commands":["npm install redux-debounced"],"cli":null},"imports":["import createDebounce from 'redux-debounced';","import { Middleware } from 'redux';","import { createStore, applyMiddleware } from 'redux';"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}