with-middleware

Add middleware support to any function prop or withState from recompose

• About
• Installation
• Examples
• Sample Usage
• Function Reference
  • withMiddleware
  • useReducer
  • useDevtools
• License

About

with-middleware provides the ability to add middleware support (and reducers) to function props of a component.

The middleware API follows closely to that of redux, giving you the ability to quickly re-use some of the middlewares that were written for redux within a single component.

This library goes well with the usage of the withState higher-order component from recompose. Changes will be required if you're using withReducer from recompose.

Installation

Install the library via:

npm install with-middleware --save

Examples

• Basic Usage
• Using withState
• Using withReducer
• Redux Emulator

Sample Usage

import React from 'react';
import { compose, withState } from 'recompose';
import { withMiddleware } from 'with-middleware';
import logger from 'some-logger-middleware';

const enhance = compose(
  withState('counter', 'setCounter', 0),
  withMiddleware('counter', 'setCounter', [logger])
);

const Counter = enhance(({ counter, setCounter }) => (
  <div>
    Count: {counter}
    <button onClick={() => setCounter(n => n + 1)}>Increment</button>
    <button onClick={() => setCounter(n => n - 1)}>Decrement</button>
  </div>
));

export default Counter;

Function Reference

withMiddleware

import { withMiddleware } from 'with-middleware';

withMiddleware(
  stateName: string,
  stateUpdaterName: string,
  middlewares: Array<Middleware>
): HigherOrderComponent

useReducer

import { useReducer } from 'with-middleware';

useReducer(
  reducer: Function
): Middleware

useDevtools

import { useDevtools } from 'with-middleware';

useDevtools(
  title: string // title shown in redux-devtool-extension console
): Middleware

License

with-middleware is MIT licensed