Cross-slice action does not correctly update state with immer middleware

[baranyildirim]

For a store with multiple slices, trying to update one slice from another using an action does not seem to work correctly with the immer middleware. Specifically, when I try to change an array, the changes don't seem to get saved.

Full example (also available in this sandbox):

import { StateCreator } from "zustand";
import { immer } from "zustand/middleware/immer";
import { devtools } from "zustand/middleware";
import { create } from "zustand";
import { shallow } from "zustand/shallow";
import { useEffect } from "react";

interface CounterState {
  A: number[];
  B: number[];
}
const initialState: CounterState = {
  A: [],
  B: []
};
interface CounterActions {
  pushA: (val: number) => void;
  pushB: (val: number) => void;
}
type CounterSlice = CounterState & CounterActions;

const createCounterSlice: StateCreator<
  CounterSlice,
  [["zustand/immer", never], never],
  [],
  CounterSlice
> = (set, get) => ({
  ...initialState,
  pushA: (val: number) =>
    set((state) => {
      state.A.push(val);
    }),
  pushB: (val: number) =>
    set((state) => {
      state.B.push(val);
    })
});

interface OtherState {}
interface OtherActions {
  pushAIndirectly: (val: number) => void;
  pushBDirectly: (val: number) => void;
}
type OtherSlice = OtherState & OtherActions;

const createOtherSlice: StateCreator<
  OtherSlice & CounterSlice,
  [["zustand/immer", never], never],
  [],
  OtherSlice
> = (set, get) => ({
  pushAIndirectly: (val: number) =>
    set((state) => {
      state.pushA(val);
    }),
  pushBDirectly: (val: number) =>
    set((state) => {
      state.B.push(val);
    })
});

export const useStore = create<CounterSlice & OtherSlice>()(
  devtools(
    immer((...a) => ({
      ...createOtherSlice(...a),
      ...createCounterSlice(...a)
    }))
  )
);

export default function App() {
  const { A, B, pushAIndirectly, pushBDirectly } = useStore(
    (state) => ({
      A: state.A,
      B: state.B,
      pushAIndirectly: state.pushAIndirectly,
      pushBDirectly: state.pushBDirectly
    }),
    shallow
  );

  useEffect(() => {
    pushAIndirectly(2);
    pushBDirectly(5);
  }, [pushAIndirectly, pushBDirectly]);

  return (
    <div className="App">
      <p>{A.toString()}</p>
      <p>{B.toString()}</p>
    </div>
  );
}

[dai-shi]

Interesting. Does it work without the immer middleware?

[baranyildirim]

Yes! The non-immer example behaves the same, but immer works when I remove the set() ... wrapper. Any clue why? Or how I can work around this issue?

Usually there is more code than just a single function call, so I'm curious what the effect of omitting set() would be.

I also tried using using get() inside set(), and that doesn't work.

[dai-shi]

That's because set is modified by the immer middleware.

If this behavior is confusing, my suggestion is to avoid the immer middleware and use produce directly from immer.

[baranyildirim]

I've enjoyed the middleware so far because it eliminates a lot of boilerplate code.

I don't want to waste your time - but is there anyway (maybe like a wrapper function?) that would make these action calls work as intended from within set()?

[dai-shi]

No, you should never call actions inside set, even without immer. It just happened to work because set((state) => ({})) is a NO-OP, but it's never intended to make side effects within it.

[baranyildirim]

Ah I understand - thank you for this. Didn't realize this is how actions worked.

[dai-shi]

You are welcome.

If you are interested, I'd highly recommend reading the source code. The JS code is pretty short.
https://twitter.com/dai_shi/status/1583082766081531905

The immer middleware is 12 lines:
https://unpkg.com/browse/[email protected]/esm/middleware/immer.js