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.
3 Replies
DraganovicDr
DraganovicDr•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;
DraganovicDr
DraganovicDr•2y ago
Want results from more Discord servers?
Add your server