🌀 useAsyncReducer

Minimalist 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.

📦 Installation

``bash
npm install use-async-reducer


or


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.
- You want to encapsulate complex logic without mixing useEffect and useReducer.

🛠️ API

`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.

🧪 Full Example

`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 (



)
}
``