# react-enhanced-reducer-hook

> An alternative to React.useReducer that accepts middlewares to do some cool things before and after dispatch.

Latest version **1.0.2** (published 2018-11-13) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install react-enhanced-reducer-hook
pnpm add react-enhanced-reducer-hook
yarn add react-enhanced-reducer-hook
bun add react-enhanced-reducer-hook
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2018-11-13 |
| First published | 2018-11-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 8.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 70 |
| Author | Jason Chung |
| Maintainers | shiningjason |
| Keywords | react, react-hooks, hooks, use-reducer, use-state, redux, redux-middleware, middleware, dispatch |

## Links

- npm: https://www.npmjs.com/package/react-enhanced-reducer-hook
- Repository: https://github.com/shiningjason/react-enhanced-reducer-hook
- Homepage: https://github.com/shiningjason/react-enhanced-reducer-hook#readme
- Issues: https://github.com/shiningjason/react-enhanced-reducer-hook/issues
- npm.io page: https://npm.io/package/react-enhanced-reducer-hook

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.2 (latest) — 2018-11-13
- 1.0.1 — 2018-11-13
- 1.0.0 — 2018-11-13
- 0.1.1 — 2018-11-13
- 0.1.0 — 2018-11-13

## README

# useEnhancedReducer · [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/shiningjason/react-enhanced-reducer-hook/blob/master/LICENSE) [![npm](https://img.shields.io/npm/v/react-enhanced-reducer-hook.svg)](https://www.npmjs.com/package/react-enhanced-reducer-hook) [![Build Status](https://travis-ci.org/shiningjason/react-enhanced-reducer-hook.svg?branch=master)](https://travis-ci.org/shiningjason/react-enhanced-reducer-hook)

`useEnhancedReducer` is an alternative to `React.useReducer` that accepts middlewares to do some cool things before and after dispatch.

Inspired by [Redux Middleware](https://redux.js.org/api/applymiddleware).

### 3-second quick look

```js
import useEnhancedReducer from 'react-enhanced-reducer-hook'

function App() {
  const middlewares = [
    ({ getState, dispatch }) => next => action => {
      // do something before dispatch...
      next(action)
       // do something after dispatch...
    }
  ]
  const [state, dispatch] = useEnhancedReducer(reducer, initialState, middlewares)
  // ...
}
```

## Installation

```
npm install react-enhanced-reducer-hook --save
```

## Real-world Usage

```js
import React from 'react'
import useEnhancedReducer from 'react-enhanced-reducer-hook'
import thunkMiddleware from 'redux-thunk'

function logMiddleware({ getState }) {
  return next => action => {
    console.log('Prev State:', getState())
    console.log('Action:', action)
    next(action)
    console.log('Next State:', getState())
  }
}

function gaMiddleware({ getState }) {
  return next => action => {
    window.ga && window.ga('send', 'event', 'Action', action.type)
    next(action)
  }
}

function useAppReducer(reducer, inititalState) {
  return useEnhancedReducer(reducer, inititalState, [
    thunkMiddleware,
    logMiddleware,
    gaMiddleware
  ])
}

function counterReducer(state, action) {
  switch (action.type) {
    case '+1': return { count: state.count + 1 }
    case '-1': return { count: state.count - 1 }
    case '0': return { count: 0 }
    default: return state
  }
}

function resetCounterAfter1Second() {
  return dispatch => setTimeout(() => { dispatch({ type: '0' }) }, 1000)
}

function App() {
  const [state, dispatch] = useAppReducer(counterReducer, 0)
  return (
    <React.Fragment>
      <button onClick={() => dispatch({ type: '+1' })}>+</button>
      <button onClick={() => dispatch(resetCounterAfter1Second())}>Reset</button>
      <button onClick={() => dispatch({ type: '-1' })}>-</button>
      <br />
      Count: {state.count}
    </React.Fragment>
  )
}
```

Try the demo in [codesanbox](https://codesandbox.io/s/xono668ynz).

## License

[MIT](https://github.com/shiningjason/react-enhanced-reducer-hook/blob/master/LICENSE)

---
_Source: https://npm.io/package/react-enhanced-reducer-hook · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._