Using middlewares

Middlewares are functions that can be used to extend the functionality of the store. They can be used to add additional functionality to the store, such as logging, error handling, or async operations.

Using middlewares with the store

To use middlewares with the store, you need to pass them as an array to the relevant middlewares option when creating the store.

1
import { Store } from "@genshi/core";
2

3
import { myActionMiddleware } from "./my-action-middleware";
4
import { myEffectMiddleware } from "./my-effect-middleware";
5

6
const store = new Store(
7
  { count: 0 },
8

9
  {
10
    middlewares: {
11
      actions: [myActionMiddleware],
12
      effects: [myEffectMiddleware],
13
    },
14
  },
15
);

Official middlewares

Genshi provides only one official middleware - Immer.

Immer

Immer is a powerful library that lets you write immutable updates to the state in a mutable way.

To use Immer with Genshi, you need to pass the middleware to the middlewares option when creating the store. To get started with Immer:

1. First, install the middlewares package

   • npm
   • yarn
   • pnpm

   1
   npm install @genshi/middlewares

2. Pass the Immer middleware to the store

   1
   import { Store } from "@genshi/core";
   2
   import { immer } from "@genshi/middlewares/immer";
   3
   
   4
   const store = new Store(
   5
     { count: 0 },
   6
     {
   7
       middlewares: {
   8
         actions: [immer],
   9
       },
   10
     },
   11
   );

3. You can now update the state in a mutable way

   1
   store.action("increment", (state) => {
   2
     return {
   3
       count: state.count + 1,
   4
     };
   5
     state.count += 1;
   6
   });

Custom middlewares

Genshi allows you to use both create and use both action and effect middlewares.

Custom action middleware

To create a custom action middleware, you can use the ActionMiddleware type from the core package.

1
export const myActionMiddleware: ActionMiddleware = ({
2
  state,
3
  handler,
4
  payload,
5
}) => {
6
  Logger.log("Action started", { state, payload });
7
  return state;
8
};

Applying the action while passing through a middleware

A common use case is to apply the action while passing through a middleware. This can be done by calling the handler function with the state and payload. This is how the Immer middleware works!

1
export const myActionMiddleware: ActionMiddleware = ({
2
  state,
3
  handler,
4
  payload,
5
}) => {
6
  Logger.log("Action started", { state, payload });
7

8
  const newState = handler({ state, payload });
9
  Logger.log("Action ended", { state: newState, payload });
10

11
  return newState;
12
};

Custom effect middleware

To create a custom effect middleware, you can use the EffectMiddleware type from the core package.

1
export const myEffectMiddleware: EffectMiddleware = ({
2
  state,
3
  handler,
4
  payload,
5
  dispatch,
6
}) => {
7
  Logger.log("Action started", { state, payload });
8
};

Applying the effect while passing through a middleware

Similar to actions, a common use case is to apply the effect while passing through a middleware. This can be done by calling the handler function with the state, payload, and dispatch function.

1
export const myEffectMiddleware: EffectMiddleware = ({
2
  state,
3
  handler,
4
  payload,
5
  dispatch,
6
}) => {
7
  Logger.log("Effect started", { state, payload });
8

9
  handler({ state, payload, dispatch });
10
  Logger.log("Effect ended", { state, payload });
11
};