redux-debounced

import { createStore, applyMiddleware, combineReducers } from 'redux'; import type { Action, Middleware } from 'redux'; import createDebounce from 'redux-debounced'; import thunkMiddleware from 'redux-thunk'; // Minimal reducer for example interface AppState { searchKey: string; }; const initialState: AppState = { searchKey: '' }; const rootReducer = (state: AppState = initialState, action: Action): AppState => { switch (action.type) { case 'TRACK_CUSTOMER_SEARCH': console.log('Reducer received TRACK_CUSTOMER_SEARCH with key:', (action as any).key); return { ...state, searchKey: (action as any).key }; default: return state; } }; // Action creator for a debounced thunk interface DebouncedThunkAction extends Action { meta?: { debounce?: { time: number; key: string; } }; (dispatch: Function, getState: Function): void; } export function trackCustomerSearch(key: string): DebouncedThunkAction { const thunk = ((dispatch: Function) => { console.log(`Simulating API call for key: ${key}`); dispatch({ type: 'TRACK_CUSTOMER_SEARCH', key }); }) as DebouncedThunkAction; thunk.meta = { debounce: { time: 2500, // Debounce for 2.5 seconds key: 'TRACK_CUSTOMER_SEARCH' // Must specify a key for thunks } }; return thunk; } // Create the Redux store with middleware const store = createStore( rootReducer, applyMiddleware(createDebounce() as Middleware, thunkMiddleware) ); // Dispatch debounced actions console.log('Dispatching search 1 (will be cancelled)'); store.dispatch(trackCustomerSearch('apple')); setTimeout(() => { console.log('Dispatching search 2 (will trigger after 2.5s from now)'); store.dispatch(trackCustomerSearch('apricot')); }, 500); setTimeout(() => { console.log('Dispatching search 3 (will trigger after 2.5s from now, cancelling previous)'); store.dispatch(trackCustomerSearch('orange')); }, 1000);