use-reducer-async


React useReducer with async actions

Introduction

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.

Install

``bash
npm install use-reducer-async
`

Usage

`javascript

import { 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 (



);
};
`

$3

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

API

$3

useReducer with async actions

#### Parameters

* reducer R
* initialState ReducerState\
* asyncActionHandlers AsyncActionHandlers\

#### Examples

`javascript
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\, Dispatch\]

Examples

The examples folder contains working examples.
You can run one of them with

`bash
PORT=8080 npm run examples:01_minimal
``

and open in your web browser.

You can also try them in codesandbox.io:
01
02
03
04

Blogs

* How to Handle Async Actions for Global State With React Hooks and Context