React useReducer with async actions
React useReducer doesn't support async actions natively. Unlike Redux, there's no middleware interface, but hooks are composable.
This is a tiny library to extend useReducer's dispatch so that dispatching async actions invoke async functions.
npm install use-reducer-asyncimport { useReducerAsync } from "use-reducer-async";
const initialState = {
sleeping: false,
};
const reducer = (state, action) => {
switch (action.type) {
case 'START_SLEEP': return { ...state, sleeping: true };
case 'END_SLEEP': return { ...state, sleeping: false };
default: throw new Error('no such action type');
}
};
const asyncActionHandlers = {
SLEEP: ({ dispatch }) => async (action) => {
dispatch({ type: 'START_SLEEP' });
await new Promise(r => setTimeout(r, action.ms));
dispatch({ type: 'END_SLEEP' });
},
};
const Component = () => {
const [state, dispatch] = useReducerAsync(reducer, initialState, asyncActionHandlers);
return (
<div>
<span>{state.sleeping ? 'Sleeping' : 'Idle'}</span>
<button type="button" onClick={() => dispatch({ type: 'SLEEP', ms: 1000 })}>Click</button>
</div>
);
};All async action handlers receive signal in the argument.
Refer examples/04_abort/src for the usage.
Note: The implementation depends on AbortController in the DOM spec. If you are using an environment that doesn't have AbortController (for example IE11), you need a polyfill: 1 2
useReducer with async actions
reducerRinitialStateReducerState<R>asyncActionHandlersAsyncActionHandlers<R, AsyncAction>
import { useReducerAsync } from 'use-reducer-async';
const asyncActionHandlers = {
SLEEP: ({ dispatch, getState, signal }) => async (action) => {
dispatch({ type: 'START_SLEEP' });
await new Promise(r => setTimeout(r, action.ms));
dispatch({ type: 'END_SLEEP' });
},
FETCH: ({ dispatch, getState, signal }) => async (action) => {
dispatch({ type: 'START_FETCH' });
try {
const response = await fetch(action.url);
const data = await response.json();
dispatch({ type: 'FINISH_FETCH', data });
} catch (error) {
dispatch({ type: 'ERROR_FETCH', error });
}
},
};
const [state, dispatch] = useReducerAsync(reducer, initialState, asyncActionHandlers);Returns [ReducerState<R>, Dispatch<ExportAction>]
The examples folder contains working examples. You can run one of them with
PORT=8080 npm run examples:01_minimaland open http://localhost:8080 in your web browser.