Theo's Typesafe Cult•2y ago

Zustand Electron Middleware

I know that this is not the right place to ask zustand or state management related questions but maybe I would find someone who worked on something similar before and prepared to give a helping hand. I'm trying to build a zustand middleware to sync state between the main process and the renderer process of an Electron app, and I'm having a hard time with typescript. The middleware works as expected except I can't use it with any other middleware, Typescript get's really mad when I do. Take a look at the attached files to find the middleware and store implementations 😉 And this is the error I get when I try to use any other middleware with it.

electronMiddleware.t...

store.ts

helpers.ts

3 Replies

DraganovicDrOP•2y ago

I think I cracked it Here is an example:

import { create } from 'zustand';
import { devtools } from 'zustand/middleware';
import electronSync from './electronMiddleware';

type FishState = {
  fish: number;
  increasePopulation: () => void;
  removeAllFish: () => void;
};

export const useFishStore = create<FishState, [['zustand/devtools', never]]>(
  electronSync(
    devtools(
      (set) => ({
        fish: 0,
        increasePopulation: () =>
          set(
            (state) => ({ fish: state.fish + 1 }),
            false,
            'increasePopulation'
          ),
        removeAllFish: () => set({ fish: 0 }),
      }),
      {
        name: 'Fish Store',
      }
    ),
    { key: 'fish-store', excludes: [] }
  )
);

export default useFishStore;

import { create } from 'zustand';
import { devtools } from 'zustand/middleware';
import electronSync from './electronMiddleware';

type FishState = {
  fish: number;
  increasePopulation: () => void;
  removeAllFish: () => void;
};

export const useFishStore = create<FishState, [['zustand/devtools', never]]>(
  electronSync(
    devtools(
      (set) => ({
        fish: 0,
        increasePopulation: () =>
          set(
            (state) => ({ fish: state.fish + 1 }),
            false,
            'increasePopulation'
          ),
        removeAllFish: () => set({ fish: 0 }),
      }),
      {
        name: 'Fish Store',
      }
    ),
    { key: 'fish-store', excludes: [] }
  )
);

export default useFishStore;

DraganovicDrOP•2y ago

DraganovicDrOP•2y ago

https://gist.github.com/anis00723/5cba43157b87ecab19e59bd8fecca638

Gist

Zustand middleware to sync state with electron main proces

Zustand middleware to sync state with electron main proces - helpers.ts

Gaming

Programming

Zustand Electron Middleware