PedroBern / react-hook-use-cancelable-thunk-reducer

React Hook useReducer with cancelable dispatch of thunks

use-cancelable-thunk-reducer

Custom implementation of react hook useReducer that will cancel all dispatched actions if the component is unmounted and allows to dispatch thunk actions (that will be canceled either).

Open on codesanbox.

Installation

yarn add use-cancelable-thunk-reducer

npm i use-cancelable-thunk-reducer

useCancelableThunkReducer

import useCancelableThunkReducer from 'use-cancelable-thunk-reducer';

const [state, dispatch] = useCancelableThunkReducer(
  reducer,
  initialState,
  callback,
  init
);

reducer

useReducer first argument.

initialState

useReducer second argument.

callback

default is undefined, if is a function, when some action is canceled it is called with the action argument: callback(action).

init

useReducer last argument.

Thunk action

The thunk actions receive (dispatch, getState) args.

const thunkAction = args => async (dispatch, getState) => {
  dispatch({type: ACTION_SENT});
  const state = getState();
  ...
}