@mvps/make-middlewared-usereducer

Make Middlewared useReducer

Create a version of useReducer with an indefinite number of middleware functions applied.

Live demo!

How to install

npm i @mvps/make-middlewared-usereducer

How to use

A middleware function is any function that accepts and returns [state, dispatch]

// logger.js
export default ([state, dispatch]) => {
  const newDispatch = action => {
    console.log(action)
    return dispatch(action)
  }
  return [state, newDispatch]
}

After you've created some middleware functions, you can create your custom useReducer with an indefinite number of middlewares applied:

// useLoggedReducer.js
import makeMiddlewaredUseReducer from '@mvps/make-middlewared-usereducer'

import logger from '../middlewares/logger'

export default makeMiddlewaredUseReducer(logger)

Then, in any component:

// App.js
import React from 'react'

import useLoggedReducer from './hooks/useLoggedReducer'

const reducer = (state, action) => {
  switch (action.type) {
    case 'COUNTER_UP':
      return state + 1
    case 'COUNTER_DOWN':
      return state - 1 || 1
    default:
      return state
  }
}

const App = () => {
  const [count, dispatch] = useLoggedReducer(reducer, 1)
  const up = () => dispatch({ type: 'COUNTER_UP' })
  const down = () => dispatch({ type: 'COUNTER_DOWN' })

  return <div>
    <h1>{count}</h1>
    <button onClick={down}>-</button>
    <button onClick={up}>+</button>
  </div>
}

Adding mutliple middlewares is just as easy!

import makeMiddlewaredUseReducer from '@mvps/make-middlewared-usereducer'

import logger from '../middlewares/logger'
import alerter from '../middlewares/alerter'
import metaAdder from '../middlewares/metaAdder'
import apiCaller from '../middlewares/apiCaller'

export default makeMiddlewaredReducer(alerter, metaAdder, apiCaller, logger)

Want to see it in action? Check out the live demo!

Have fun!