Unstated Suspense Middleware

Add middlewares support to unstated-suspense.

Install

npm install --save unstated-suspense-middleware

Usage

The following is an overly semplicistic example of how middlewares are added to unstated, but it illustrates the new APIs available and how to use them.

import * as React from 'react';
import {Container} from 'unstated-suspense-middleware';

class AppContainer extends Container {
  state = {
    value: 'No value...'
  };
  middlewares () { // This function is called by the constructor, it's just a convenience method where you can define your middlewares
    this.addMiddleware ( this.middlewareValueChanged ); // Add a new middleware via the `addMiddleware` method
  }
  middlewareValueChanged ( prevState ) { // Middlewares are called with the previous state
    if ( prevState.value !== this.state.value ) {
      this.removeMiddleware ( this.middlewareValueChanged ); // Remove a middleware via the `removeMiddleware` method
      return state = { value: 'middleware!' }; // A middleware can either mutate the state (ouch!) or return a new one
    }
  }
  updateValueFoo () {
    this.suspendMiddlewares (); // Suspend execution of middlewares
    this.setState ({ value: 'foo' });
    this.setState ({ value: 'foo2' });
    this.setState ({ value: 'foo3' });
    this.unsuspendMiddlewares (); // Resume execution of middlewares, since the state changed while middlewares were suspended they will be called, and they will receive the state available at the moment of the suspension
  }
  updateValueBar () {
    this.setState ({ value: 'bar' });
  }
}

Note: Middlewares are not re-executed when any of them update the state.

Note: Middlewares are executed in the order that they are added, make sure you're adding them in the right order.

Related

• unstated-with-containers: Higher-Order Component for subscribing to containers.
• unstated-connect2: Connect containers to components, without sacrificing performance.
• unstated-hmr: Preserve containers' states across Hot-Module-Replacements.
• unstated-compose: Compose multiple containers into one.
• unstated-compose-suspense: Add suspend/unsuspend support to unstated-compose.
• unstated-compose-suspense-middleware: Add middlewares support to unstated-compose-suspense.
• unstated-suspense: Suspend/unsuspend updates propagation from your containers.

License

MIT © Fabio Spampinato