How to create a TypeScript wrapper for create
+ devtools
+ immer
+ combine
?
#2195
Answered
by
dai-shi
rodrigocfd
asked this question in
Q&A
-
I have a multi-page app which creates multiple stores, and they all follow the same pattern: import {create} from 'zustand';
import {combine, devtools} from 'zustand/middleware';
import {immer} from 'zustand/middleware/immer';
const useFoo = create(
devtools(
immer(
combine({
names: [] as string[],
},
set => ({
addName(n: string): void {
set(state => state.names.push(n));
},
})),
),
{name: 'Foo'},
),
); I'm considering writing a wrapper function to abstract away all the repetitive stuff, something like this: function createOurStore(name: string, state: ???, actions: ???) {
return create(
devtools(
immer(
combine(state, actions),
),
{name},
),
);
} So the store above could be written as: createOurStore('Foo', {
names: [] as string[],
}, set => ({
addName(n: string): void {
set(state => state.names.push(n));
},
})); But I'm having a hard time wrapping my head around the TypeScript sorcery involved... Is such a function possible to be written? |
Beta Was this translation helpful? Give feedback.
Answered by
dai-shi
Nov 20, 2023
Replies: 1 comment 13 replies
-
I don't think having |
Beta Was this translation helpful? Give feedback.
13 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Here you go: https://tsplay.dev/w1Qg2w