请问下大佬，zustand中slice 有相同的action的名称，在合并为store的时候，会覆盖吗？是需要在slice定义的时候就应该区分开来吗，还是指的有区分的方法呢？

Question

请问下大佬，zustand中slice 有相同的action的名称，在合并为store的时候，会覆盖吗？请问是需要在slice定义的时候就区分开来吗，还是指的有区分的方法呢？

import { create, StateCreator } from "zustand";
import { subscribeWithSelector } from "zustand/middleware";

export interface ASlice {
  aState: string,
  action1: () => void,
  action2: () => void 
}

export interface BSlice {
  bState: string,
  action1: () => void,
  action2: () => void 
}

export const createASlice: StateCreator<ASlice & BSlice, [], [["zustand/subscribeWithSelector", never]], ASlice> = (set, get) => ({
  aState: 'a',
  action1: () => {
    set({ aState: 'a' })
  },
  action2: () => {
    // get can obtain the variables or methods defined in this Slice
    set({ aState: 'b' })
  }
});

export const createBSlice: StateCreator<ASlice & BSlice, [], [["zustand/subscribeWithSelector", never]], BSlice> = (set, get) => ({
  bState: 'b',
  action1: () => {

  },
  action2: () => {
    // get can obtain the variables or methods defined in this Slice

    const { aState } = get()
    console.log(aState)
  }
});

// Zustand store
export const useStore = create<ASlice & BSlice>()(subscribeWithSelector((...params) => ({
  ...createASlice(...params),
  ...createBSlice(...params)
})));

Answer 1

用不同的命名（推荐）：

export interface ASlice {
  aState: string,
  aAction1: () => void,  // 改名
  aAction2: () => void   // 改名
}

export interface BSlice {
  bState: string,
  bAction1: () => void,  // 改名
  bAction2: () => void   // 改名
}

export const createASlice: StateCreator<ASlice & BSlice, [], [["zustand/subscribeWithSelector", never]], ASlice> = (set, get) => ({
  aState: 'a',
  aAction1: () => {
    set({ aState: 'a' })
  },
  aAction2: () => {
    set({ aState: 'b' })
  }
});

export const createBSlice: StateCreator<ASlice & BSlice, [], [["zustand/subscribeWithSelector", never]], BSlice> = (set, get) => ({
  bState: 'b',
  bAction1: () => {
    // B的逻辑
  },
  bAction2: () => {
    const { aState } = get()
    console.log(aState)
  }
});

用命名空间：

export interface ASlice {
  aState: string,
  a: {
    action1: () => void,
    action2: () => void
  }
}

export interface BSlice {
  bState: string,
  b: {
    action1: () => void,
    action2: () => void
  }
}

export const createASlice: StateCreator<ASlice & BSlice, [], [["zustand/subscribeWithSelector", never]], ASlice> = (set, get) => ({
  aState: 'a',
  a: {
    action1: () => {
      set({ aState: 'a' })
    },
    action2: () => {
      set({ aState: 'b' })
    }
  }
});

export const createBSlice: StateCreator<ASlice & BSlice, [], [["zustand/subscribeWithSelector", never]], BSlice> = (set, get) => ({
  bState: 'b',
  b: {
    action1: () => {
      // B的逻辑
    },
    action2: () => {
      const { aState } = get()
      console.log(aState)
    }
  }
});

用的时候：

// 1
const aAction1 = useStore(state => state.aAction1);
const bAction1 = useStore(state => state.bAction1);

//2
const aAction1 = useStore(state => state.a.action1);
const bAction1 = useStore(state => state.b.action1);