Migrated from this commit in MobX-State-Tree in the work to undo the monorepo set up for MST.

Prebuilt middlewares

The MST package ships with some prebuilt middlewares, which serves mainly as examples on how to write your own middleware. The source of each middleware can be found in this github directory, you are encouraged to read them!

The middlewares are bundled separately to keep the core package small, and can be included using:

import { MiddlewareName } from "mst-middlewares";

The middlewares serve as example and are supported on a best effort bases. The goal of these middlewares is that if they are critical to your system, you can simply copy paste them and further tailor them towards your specific needs.

For the exact description of all middleware events offered by MST, see the api docs

Contributing

Feel free to contribute to these middlewares and improve them on your experience. The middlewares must be written in TypeScript. Any additional test for your middleware should be written inside the test folder

simple-action-logger

This is the most basic of middlewares: It logs all direct action invocations. Example:

import { simpleActionLogger } from "mst-middlewares";

// .. type definitions ...

const store = Store.create({
  todos: [{ title: "test " }],
});

mst.addMiddleware(store, simpleActionLogger);

store.todos[0].setTitle("hello world");

// Prints:
// [MST] /todos/0/setTitle

For a more sophisticated logger, see action-logger which also logs process invocations and continuations

action-logger

This is a little more sophisticated middlewares: It logs all direct action invocations and also every flow that spawns, returns or throws. Example:

import { actionLogger } from "mst-middlewares";

// .. type definitions ...

const store = Store.create({
  todos: [{ title: "test " }],
});

mst.addMiddleware(store, actionLogger);

store.todos[0].setTitle("hello world");

This will print something like `[MST] -

Most popular functions for mst-middlewares

To help you get started, we’ve selected a few mst-middlewares examples, based on popular ways it is used in public projects.

mst-middlewares.connectReduxDevtools