react-usemiddleware

React useMiddleware hook

Redux compatible middleware provider for React >=16.7 Hooks

react-useMiddleware allows you to use all existing Redux middlewares with React's new feature called hooks. It introduces new hook called useMiddleware, which is a wrapper arounf useReducer, but allows you to pass a list of middlewares to be used.

Install

$ npm install react-usemiddleware --save
$ yarn add react-usemiddleware

API

you can use useMiddleware as a straight replacement for useReducer, and optionally pass 3rd parameter - an array of middlewares to be applied to a dispatch function.

 const [state, dispatch] = useMiddleware(reducer, initialState, middlewares = []);

Takes 3 parameters:

• reducer, same as passed into useReducer hook
• initialState, same as passed into useReducer hook
• middlewares - array of middlewares, eg, [thunk, createLogger, saga]

Example

import React from 'react';
import useMiddleware from 'react-usemiddleware';
import { createLogger } from "redux-logger";
import thunk from "redux-thunk";

const logger = createLogger();
const middlewares = [thunk, logger];

const reducer = (state, action) => {
  switch (action.type) {
    case "INC":
      return state + 1;
    case "DEC":
      return state - 1;
    case "SET":
      return action.payload;
    default:
      return state;
  }
};

const App = (props) => {
  const [count, dispatch] = useMiddleware(reducer, 0, middlewares);

  const thunkAction = dispatch(() => setTimeout(() => dispatch({ type: "SET", payload: 7 })), 1000);
  const incCount = () => dispatch({ type: "INC" });
  const decCount = () => dispatch({ type: "DEC" });

  return (
    <div className="App">
      <button onClick={decCount}>[-]</button>
      <span>{count}</span>
      <button onClick={incCount}>[+]</button>
      <button onClick={thunkAction}>Async</button>
    </div>
  );
}

Live example

A demo can be found here

Contributions

Please open an Issue or a PR