Awesome Open Source
Awesome Open Source

useEnhancedReducer ยท GitHub license npm Build Status

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

Inspired by Redux Middleware.

3-second quick look

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

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


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

Real-world Usage

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)
    console.log('Next State:', getState())

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

function useAppReducer(reducer, inititalState) {
  return useEnhancedReducer(reducer, inititalState, [

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 (
      <button onClick={() => dispatch({ type: '+1' })}>+</button>
      <button onClick={() => dispatch(resetCounterAfter1Second())}>Reset</button>
      <button onClick={() => dispatch({ type: '-1' })}>-</button>
      <br />
      Count: {state.count}

Try the demo in codesanbox.



Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
javascript (64,057)ย 
react (4,499)ย 
redux (1,059)ย 
middleware (296)ย 
react-hooks (149)ย 
redux-middleware (18)ย 
dispatch (16)ย 

Find Open Source By Browsing 7,000 Topics Across 59 Categories

Advertising ๐Ÿ“ฆ10
All Projects
Application Programming Interfaces ๐Ÿ“ฆ124
Applications ๐Ÿ“ฆ192
Artificial Intelligence ๐Ÿ“ฆ78
Blockchain ๐Ÿ“ฆ73
Build Tools ๐Ÿ“ฆ113
Cloud Computing ๐Ÿ“ฆ80
Code Quality ๐Ÿ“ฆ28
Collaboration ๐Ÿ“ฆ32
Command Line Interface ๐Ÿ“ฆ49
Community ๐Ÿ“ฆ83
Companies ๐Ÿ“ฆ60
Compilers ๐Ÿ“ฆ63
Computer Science ๐Ÿ“ฆ80
Configuration Management ๐Ÿ“ฆ42
Content Management ๐Ÿ“ฆ175
Control Flow ๐Ÿ“ฆ213
Data Formats ๐Ÿ“ฆ78
Data Processing ๐Ÿ“ฆ276
Data Storage ๐Ÿ“ฆ135
Economics ๐Ÿ“ฆ64
Frameworks ๐Ÿ“ฆ215
Games ๐Ÿ“ฆ129
Graphics ๐Ÿ“ฆ110
Hardware ๐Ÿ“ฆ152
Integrated Development Environments ๐Ÿ“ฆ49
Learning Resources ๐Ÿ“ฆ166
Legal ๐Ÿ“ฆ29
Libraries ๐Ÿ“ฆ129
Lists Of Projects ๐Ÿ“ฆ22
Machine Learning ๐Ÿ“ฆ347
Mapping ๐Ÿ“ฆ64
Marketing ๐Ÿ“ฆ15
Mathematics ๐Ÿ“ฆ55
Media ๐Ÿ“ฆ239
Messaging ๐Ÿ“ฆ98
Networking ๐Ÿ“ฆ315
Operating Systems ๐Ÿ“ฆ89
Operations ๐Ÿ“ฆ121
Package Managers ๐Ÿ“ฆ55
Programming Languages ๐Ÿ“ฆ245
Runtime Environments ๐Ÿ“ฆ100
Science ๐Ÿ“ฆ42
Security ๐Ÿ“ฆ396
Social Media ๐Ÿ“ฆ27
Software Architecture ๐Ÿ“ฆ72
Software Development ๐Ÿ“ฆ72
Software Performance ๐Ÿ“ฆ58
Software Quality ๐Ÿ“ฆ133
Text Editors ๐Ÿ“ฆ49
Text Processing ๐Ÿ“ฆ136
User Interface ๐Ÿ“ฆ330
User Interface Components ๐Ÿ“ฆ514
Version Control ๐Ÿ“ฆ30
Virtualization ๐Ÿ“ฆ71
Web Browsers ๐Ÿ“ฆ42
Web Servers ๐Ÿ“ฆ26
Web User Interface ๐Ÿ“ฆ210