https://github.com/pedrobern/react-hook-use-cancelable-thunk-reducer

React Hook useReducer with cancelable dispatch of thunks
https://github.com/pedrobern/react-hook-use-cancelable-thunk-reducer

react react-hooks redux thunk usereducer

Last synced: 3 months ago
JSON representation

React Hook useReducer with cancelable dispatch of thunks

• Host: GitHub
• URL: https://github.com/pedrobern/react-hook-use-cancelable-thunk-reducer
• Owner: PedroBern
• License: mit
• Created: 2019-12-15T18:03:27.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-05T03:03:47.000Z (over 2 years ago)
• Last Synced: 2025-03-18T13:32:15.498Z (3 months ago)
• Topics: react, react-hooks, redux, thunk, usereducer
• Language: JavaScript
• Size: 831 KB
• Stars: 26
• Watchers: 1
• Forks: 0
• Open Issues: 16
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# use-cancelable-thunk-reducer

[![Codecov Coverage](https://img.shields.io/codecov/c/github/pedrobern/react-hook-use-cancelable-thunk-reducer/master.svg?style=flat-square)](https://codecov.io/gh/pedrobern/react-hook-use-cancelable-thunk-reducer/)

[![Build Status](https://travis-ci.com/pedrobern/react-hook-use-cancelable-thunk-reducer.svg?branch=master)](https://travis-ci.com/pedrobern/react-hook-use-cancelable-thunk-reducer)

[![dependencies](https://david-dm.org/pedrobern/react-hook-use-cancelable-thunk-reducer.svg)](https://github.com/pedrobern/react-hook-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](https://github.com/reduxjs/redux-thunk) (that will be canceled either).

![demo-gif](/demo.gif)

Open on [codesanbox](https://codesandbox.io/s/use-cancelable-thunk-reducer-lirs9).

## Installation

```

yarn add use-cancelable-thunk-reducer

npm i use-cancelable-thunk-reducer

```

## useCancelableThunkReducer

```javascript

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.

```javascript

const thunkAction = args => async (dispatch, getState) => {

  dispatch({type: ACTION_SENT});

  const state = getState();

  ...

}

```