persist() middleware mutates slice actions property, causing reference corruption

[rluncasu]

Bug Description

persist() middleware mutates slice actions property, causing reference corruption

Description

When using the persist() middleware with Zustand slices that contain an actions property, the middleware appears to mutate the actions reference after slice creation. This causes slice.actions to point to actions from a different slice, leading to runtime errors where actions are undefined or reference the wrong functions.

Steps to Reproduce

1. Create multiple Zustand slices using persist() middleware, where at least one slice has an actions property:

import { StateCreator } from "zustand";
import { persist } from "zustand/middleware";

type Slice1 = {
  value: string;
  actions: {
    setValue: (value: string) => void;
  };
};

const createSlice1: StateCreator<Slice1, [], [["zustand/persist", Pick<Slice1, "value">]]> = persist(
  (set) => ({
    value: "",
    actions: {
      setValue: (value) => set({ value }),
    },
  }),
  { name: "slice1" }
);

type Slice2 = {
  data: number;
  actions: {
    setData: (data: number) => void;
  };
};

const createSlice2: StateCreator<Slice2, [], [["zustand/persist", Pick<Slice2, "data">]]> = persist(
  (set) => ({
    data: 0,
    actions: {
      setData: (data) => set({ data }),
    },
  }),
  { name: "slice2" }
);

2. Create a combined store that uses both slices:

type Store = Slice1 & Slice2;

const stateCreator: StateCreator<Store> = (...a) => {
  const slice1 = createSlice1(...a);
  const slice2 = createSlice2(...a);
  
  // At this point, slice1.actions should contain setValue
  console.log("slice1.actions keys:", Object.keys(slice1.actions));
  // Expected: ["setValue"]
  // Actual: May contain actions from slice2 or other slices
  
  return {
    ...slice1,
    ...slice2,
    actions: {
      ...slice1.actions,  // This may reference wrong actions
      ...slice2.actions,
    },
  };
};

const useStore = create<Store>()(stateCreator);

3. Try to use the actions:

const { setValue } = useStore((state) => state.actions);
setValue("test"); // TypeError: setValue is not a function

Expected Behavior

The actions property of a slice created with persist() middleware should remain stable and reference the correct action functions, even after the slice is created and used in a combined store.

Actual Behavior

The actions property gets mutated by the persist() middleware, causing it to reference actions from other slices. When accessing slice.actions after creation, it may contain:

• Actions from a different slice
• undefined values for expected action functions
• Wrong function references

Evidence from our debugging:

• Slice created correctly with actions: ["setCurrentGoogleAccount", "setActiveAccountType"]
• Immediately after creation, slice.actions contains actions from differenceSlice: ["setSelectedSheet", "setWorksheetChanges", ...]
• TypeScript types the actions as undefined instead of functions

Workaround

Create a factory function that generates actions independently of the persist() middleware:

// Create actions factory
const createSlice1Actions = (set: SetState<Slice1>) => ({
  setValue: (value: string) => set({ value }),
});

// Use factory in slice
const createSlice1: StateCreator<Slice1, [], [["zustand/persist", Pick<Slice1, "value">]]> = persist(
  (set) => {
    const actions = createSlice1Actions(set);
    return {
      value: "",
      actions,
    };
  },
  { name: "slice1" }
);

// Export factory for use in store
export const getSlice1Actions = (set: SetState<Slice1>) => createSlice1Actions(set);

// In store creator, use factory instead of slice.actions
const stateCreator: StateCreator<Store> = (...a) => {
  const [setState] = a;
  const slice1 = createSlice1(...a);
  const slice1Actions = getSlice1Actions(setState as any); // Use factory, not slice.actions
  
  return {
    ...slice1,
    actions: {
      ...slice1Actions, // Use factory-generated actions
      // ...
    },
  };
};

Environment

• Zustand version: ^5.0.10
• TypeScript version: ^5.7.3
• React version: ^18.3.0
• Additional Zustand packages: zustand-sync-tabs@^0.2.3

Additional Context

This issue occurs specifically when:

1. Multiple slices use persist() middleware
2. Slices have an actions property
3. Slices are combined into a single store
4. The order of slice creation matters - later slices may corrupt earlier slices' actions

The issue was discovered when trying to access setCurrentGoogleAccount from a persistent auth slice, but it was referencing actions from a differenceSlice instead.

Related

This appears to be related to how persist() middleware handles object references and may be a side effect of how the middleware wraps and transforms the slice state.

Reproduction Link

https://codesandbox.io/p/sandbox/cz3glc

[dbritto-dev]

@rluncasu that's totally expected due to the implementation is wrong, middlewares are designed to work at store level so you can't use it on slices (slices pattern)

[rluncasu]

thank you, I'll move it at store level