https://github.com/fabiospampinato/unstated-compose-suspense-middleware

Add middlewares support to `unstated-compose-suspense`.
https://github.com/fabiospampinato/unstated-compose-suspense-middleware

compose middleware react suspense unstated

Last synced: 3 months ago
JSON representation

Add middlewares support to `unstated-compose-suspense`.

• Host: GitHub
• URL: https://github.com/fabiospampinato/unstated-compose-suspense-middleware
• Owner: fabiospampinato
• License: mit
• Archived: true
• Created: 2018-10-01T23:46:29.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2018-12-08T03:14:10.000Z (almost 6 years ago)
• Last Synced: 2024-05-01T12:39:24.410Z (6 months ago)
• Topics: compose, middleware, react, suspense, unstated
• Language: TypeScript
• Homepage:
• Size: 18.6 KB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Unstated Compose Suspense Middleware

Add middlewares support to `unstated-compose-suspense`.

## Install

```sh

npm install --save unstated-compose-suspense-middleware

```

## Usage

To learn more about composed containers check out [unstated-compose](https://github.com/fabiospampinato/unstated-compose).

```ts

import * as React from 'react';

import {ChildContainer} from 'unstated-compose-suspense-middleware';

class AppContainer extends ChildContainer {

  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.setState ({ value: 'foo' });

  }

  updateValueBar () {

    this.setState ({ value: 'bar' });

  }

}

```

## Related

- **[unstated-with-containers](https://github.com/fabiospampinato/unstated-with-containers)**: Higher-Order Component for subscribing to containers.

- **[unstated-connect2](https://github.com/fabiospampinato/unstated-connect2)**: Connect containers to components, without sacrificing performance.

- **[unstated-hmr](https://github.com/fabiospampinato/unstated-hmr)**: Preserve containers' states across Hot-Module-Replacements.

- **[unstated-compose](https://github.com/fabiospampinato/unstated-compose)**: Compose multiple containers into one.

- **[unstated-compose-suspense](https://github.com/fabiospampinato/unstated-compose-suspense)**: Add suspend/unsuspend support to `unstated-compose`.

- **[unstated-suspense](https://github.com/fabiospampinato/unstated-suspense)**: Suspend/unsuspend updates propagation from your containers.

- **[unstated-suspense-middleware](https://github.com/fabiospampinato/unstated-suspense-middleware)**: Add middlewares support to `unstated-suspense`.

## License

MIT © Fabio Spampinato