zustand如何进行监听属性的变化？

Question

zustand如何进行监听属性的变化？
比如我有：Slice如下：

export interface SectionSlice {
  Sections: Section[],
  selectedSection: Section | undefined,
  isLoading: boolean,

  selectSection: (SectionID: number) => void,
  fetchSections: () => Promise<void>,
  addSection: (Section:Section) => Promise<void>,
  updateSection: (Section:Section) => Promise<void>,
  deleteSection: (id: number) => Promise<void>,

  SectionMods: SectionMod[],
  selectedSectionMod: SectionMod | undefined,
  selectSectionMod: (SectionModId: number) => Promise<void>,
  fetchSectionMods: (SectionId: number) => Promise<void>,
}

//type SliceType = StateCreator<SectionSlice, [], [], SectionSlice>

export const createSectionSlice: StateCreator<SectionSlice> = (set, get) => ({

  // 1.状态
  Sections: [] as Section[],
  selectedSection: undefined as Section | undefined,

  SectionMods: [] as SectionMod[],
  selectedSectionMod: undefined as SectionMod | undefined,

  // 2.操作状态的actions

  isLoading: false, // 是否正在操作
  fetchSections: async() => {
    try {
      set({ isLoading: true })
      const Sections: Section[] = await getSections()

      set({ Sections: Sections })
    } catch (error) {

    } finally {
      set({ isLoading: false })
    }
  },

  // 选择项目
  selectSection: (SectionID: number) => {

    // 基于SectionID获取Section
    const { Sections } = get()
    const filteredSection = (Sections as Section[]).filter((Section: Section) => Section.id === SectionID);



    set({ selectedSection: filteredSection[0] })
  },

  addSection: async(Section:Section) => {
    try {
      set({ isLoading: true })
      await addSection(Section)
    } catch (error) {

    } finally {
      const { fetchSections } = get(); // 通过get获取当前状态里的fetchSections方法
      fetchSections()
      set({ isLoading: false })
    }
  },

  updateSection: async(Section: Section) => {
    try {
      set({ isLoading: true })
      await updateSection(Section)
    } catch (error) {

    } finally {
      const { fetchSections } = get(); // 通过get获取当前状态里的fetchSections方法
      fetchSections()
      set({ isLoading: false })
    }
  },

  deleteSection: async(id: number) => {
    try {
      set({ isLoading: true })
      await deleteSection(id)
    } catch (error) {

    } finally {
      const { fetchSections } = get(); // 通过get获取当前状态里的fetchSections方法
      fetchSections()
      set({ isLoading: false })
    }
  },

  selectSectionMod: async(SectionModId: number) => {

    // 基于SectionID获取Section
    const { SectionMods } = get()
    const filteredSectionMod = (SectionMods as SectionMod[]).filter((SectionMod: SectionMod) => SectionMod.id === SectionModId);

    set({selectedSectionMod: filteredSectionMod[0]})
  },

  fetchSectionMods: async(SectionId: number) => {

    try {
      set({ isLoading: true })

      const SectionMods: SectionMod[] = await getSectionMods(SectionId)
      set({ SectionMods: SectionMods })

      const { selectedSectionMod } = get()
      if( !selectedSectionMod ) {

        const mainSectionMods: SectionMod[] = SectionMods.filter((SectionMod) => SectionMod.isMain === true);
        set({ selectedSectionMod:  mainSectionMods[0]})
      }

    } catch (error) {

    } finally {
      set({ isLoading: false })
    }

  },

})

我想要在Store内（可以是Slice中）中监听：selectedSection 变化(比如：我想要知道selectedSection改变之后，立即就触发方法，在方法里面操作)，在监听的事件里面在做其他的操作。

Answer 1

import { create } from 'zustand'
import { subscribeWithSelector } from 'zustand/middleware'

//用 subscribeWithSelector
const useSectionStore = create(
  subscribeWithSelector(
    (set, get) => createSectionSlice(set, get)
  )
)

useSectionStore.subscribe(
  (state) => state.selectedSection,
  (selectedSection, previousSelectedSection) => {
    
    console.log('selectedSection changed:', selectedSection)
    console.log('previous value:', previousSelectedSection)
    
    // 比如自动获取 Section 的 Mods
    if (selectedSection) {
      useSectionStore.getState().fetchSectionMods(selectedSection.id)
    }
  }
)

用的时候:

const unsubscribe = useSectionStore.subscribe(
  (state) => state.selectedSection,
  (selectedSection, previousSelectedSection) => {
    // 处理
  },
  {
    equalityFn: shallow // 自定义比较函数
  }
)

useEffect(() => {
  const unsubscribe = useSectionStore.subscribe(
    (state) => state.selectedSection,
    (selectedSection) => {
      // 处理
    }
  )
  
  return () => unsubscribe()
}, [])