Pattern for no store actions?

[jeremiahfallin]

I have a large store with a lot of actions. I'm trying to follow the no store actions pattern from the Zustand repo but I am having some issues with immer.

I have two example functions. One is the regular way where I get the error:
TypeError: Cannot assign to read only property 'value' of object '#<Object>'

I also get an error when trying to add values to an array that is empty.

When I try to use the function version with Immer's produce function nothing happens.

Here is an example:
https://stackblitz.com/edit/stackblitz-starters-uutgra?file=app%2Fpage.tsx

[dai-shi]

Can @Ebubekir-Tas take a look?

[Ebubekir-Tas]

I have a large store with a lot of actions. I'm trying to follow the no store actions pattern from the Zustand repo but I am having some issues with immer.

I have two example functions. One is the regular way where I get the error: TypeError: Cannot assign to read only property 'value' of object '#<Object>'

I also get an error when trying to add values to an array that is empty.

When I try to use the function version with Immer's produce function nothing happens.

Here is an example: https://stackblitz.com/edit/stackblitz-starters-uutgra?file=app%2Fpage.tsx

createSlicesWithImmer works by wrapping a slice's actions in a produce from immer, enabling the mutable syntax without explicitly using immer's produce. Meaning if you use createSlicesWithImmer you don't need to import produce.

This means that as of now createSlicesWithImmer would not work in a "no store actions" pattern, as it works directly on the store actions. If you use regular createSlices with produce wrappers on each action that uses mutable syntax would this work in your case?

Also for adding to an empty array, can you provide an example of this issue? This seems to work for me:

import { Draft } from 'immer';

interface NumArr {
  arr: number[];
}

const arrSlice = createSliceWithImmer({
  name: 'arr',
  value: {
    arr: [],
  } as NumArr,
  actions: {
    addToArr: () => (state: Draft<NumArr>) => {
      state.arr.push(1);
    },
  },
});

I notice in your example you have:

 const characters = state.characters.characters as Character[];
      Object.values(characters).forEach((character) => {
        character.current.value = 15;
      });

But in this example state.characters.characters is an object of Character, not an array so pushing to it would not do anything. Maybe in your real code it's an array but from this example I can't see the issue you're referring to.

@jeremiahfallin

[jeremiahfallin]

I am having trouble recreating the array issue on StackBlitz but using produce inside each action fixes all of my errors but creates 1 new one.

Right now I'm using onRehydrateStorage in persist to update a boolean when the state has been hydrated from the server. That function isn't quite working the same as it was before switching to withSlices.

Here's an example where it seems to just never run:
https://stackblitz.com/edit/stackblitz-starters-uutgra?file=app%2Fpage.tsx