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.

yarn add use-cancelable-thunk-reducer

npm i use-cancelable-thunk-reducer

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

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

useReducer first argument.

useReducer second argument.

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

useReducer last argument.

The thunk actions receive (dispatch, getState) args.

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