Immer-Middleware + Typescript + SplittedStore

[maxstue]

Hi,

Currently I try to switch from redux-toolkit to zustand and I'm a little bit stuck because I want to have complete typescript and immer-Middleware support for all slices.
I don't want to write the "produce" function in all set functions, in each slice and I only want to have access to the slice state and functions and not the global state.
But if I create the store and slice like below, immer-Middleware works but I have access to all global store functions and state.

I create my store like so:

import create, { GetState, SetState } from 'zustand';
import { immer } from 'zustand/middleware/immer';
import { devtools } from 'zustand/middleware';
import { createArticleSlice } from './articleSlice';

export type StoreSlice<T extends object, E extends object = T> = (
  set: (
    nextStateOrUpdater: object | ((state: E extends T ? E : E & T) => void),
    shouldReplace?: boolean | undefined,
    actionType?:
      | string
      | {
          type: unknown;
        }
      | undefined
  ) => void,
  get: GetState<E extends T ? E : E & T>
) => T;

const createRootSlice = (set: SetState<any>, get: GetState<any>) => ({
  article: createArticleSlice(set, get),
});

export const useStore = create(devtools(immer(createRootSlice), { name: 'ZustandStore' }));

Slice:

import { IPageableRequestData } from '@/models/article';
import { StoreSlice } from './store';

interface ArticleSlice {
  newVisiblePageLoading: boolean;
  pageRequestData: Omit<IPageableRequestData, 'limit' | 'from'> | undefined;
  setPagerequestData: (data: Omit<IPageableRequestData, 'limit' | 'from'>) => void;
  setNewPageDataLoading: (data: boolean) => void;
}

export const createArticleSlice: StoreSlice<ArticleSlice> = (set) => ({
  pageRequestData: undefined,
  newVisiblePageLoading: false,
  setPagerequestData: (data: Omit<IPageableRequestData, 'limit' | 'from'>) =>
    set((state) => {
      state.article.pageRequestData = data;
    }),
  setNewPageDataLoading: (data) =>
    set((state) => {
      state.article.newVisiblePageLoading = data;
    }),
});

Using it inside of a component is perfect just how I would like to have it, e.g.const name = useStore((state)=> state.article.pageRequestData).

I need to write "state.article.variableName" but I only want to write "state.variableName", just like in redux-toolkit.

The types in the slice are not working because state(inside of the set-function) thinks it should be of type ArticleSlice but it actually is of type "{ article: ArticleSlice }"

Is this what I try to achieve possible to do? And is it possible to split the actions from the state ?

I saw this but it's not fully the same to what i try to achieve.

Thanks in advance and I hope I expressed well, since English is not my native language :)

[dai-shi]

#178 is the discussion about namespacing, and it's a field for third-party libraries.

And is it possible to split the actions from the state ?

What do you mean by this?

[maxstue]

mmh yeah I've seen this, but I'm not really liking it... I think I was just under a wrong mindset coming from redux-toolkit, that zustand ist very similar too it, with the style how you write the stores. But it is different and more simpler. And somehow I find that it has some similarities with pinia from the vue ecosystem. 🤔

[dai-shi]

So, sounds like I misunderstand your usage. How would you want actions separated from the store?

[maxstue]

Something like this

export const store = { 
  pageRequestData: undefined,
  newVisiblePageLoading: false,
}

export const storeActions: StoreSlice<ArticleSlice> = (set) => ({
  setPagerequestData: (data: Omit<IPageableRequestData, 'limit' | 'from'>) =>
    set((state) => {
      state.article.pageRequestData = data;
    }),
  setNewPageDataLoading: (data) =>
    set((state) => {
      state.article.newVisiblePageLoading = data;
    }),
});

export const useStore = create(((set) => ({    
  article: {
    ...storeActions(set),
    ...store,
  }
})))

but with immer-Middleware, so I don't need to use the "produce"-Fn, support and proper typescript support.
Also namespacing but like you said that it is done by third-parties.

[dai-shi]

Please see how this counter example works:
https://codesandbox.io/s/intelligent-haslett-ghdber?file=/src/App.tsx

[maxstue]

Thanks that example helps a lot :)