this package introduces a hook that functions as an asynchronus reducer (useAsyncReducer), it is react and typescript friendly
npm install react-async-reducerMinimalist hook for handling asynchronous reducers in React with TypeScript. Perfect for scenarios where state depends on async operations such as API calls, heavy computations, or chained effects.
``bash`
npm install use-async-reduceror
yarn add use-async-reducer
โ๏ธ Requirements
- React โฅ 16.8 (hooks enabled)
- TypeScript โฅ 4.5
- Compatible with Vite, Next.js, CRA, Tauri, Electron, and more.
๐ What problem does it solve?
React does not natively support asynchronous reducers. useAsyncReducer lets you use async logic inside your reducer without breaking the declarative flow. It's useful when:
- The new state depends on a promise (fetch, calculation, delay).
- You want to keep the semantics of dispatch(action) without external effects.useEffect
- You want to encapsulate complex logic without mixing and useReducer.
`ts`
function useAsyncReducer
reducer: (state: State, action: Action) => Promise
initialState: State
): {
state: State;
dispatch: (action: Action) => void;
}
Parameters
- reducer: An async function that receives the current state and an action, and returns a promise with the new state.initialState
- : The initial state for the reducer.
Returns
- state: The current state.dispatch
- : Function to dispatch actions. Does not return anything, but updates the state when the promise resolves.
`tsx
import useAsyncReducer from 'use-async-reducer'
// State and Action types
type State = { count: number }
type Action = { type: 'increment' | 'decrement' }
// Async reducer function
const asyncReducer = async (state: State, action: Action): Promise
switch (action.type) {
case 'increment':
await new Promise(res => setTimeout(res, 300)) // Simulate delay
return { count: state.count + 1 }
case 'decrement':
return { count: state.count - 1 }
default:
return state
}
}
// Usage in a component
const Counter = () => {
const { state, dispatch } = useAsyncReducer(asyncReducer, { count: 0 })
return (
Count: {state.count}