Zustand里怎么监听某个state变化并执行副作用？

爱学习的秀花提问于 2026-03-19 18:36:21 阅读 4

框架

我用Zustand管理状态，现在想在某个state字段变化时自动发请求，但useEffect好像没法直接监听store里的值，试了下总是拿不到最新值或者无限循环。

比如我的store里有个filter变量，想在它变的时候调用fetchData()，该怎么写才对？现在代码大概是这样：

const useStore = create((set, get) => ({
  filter: 'all',
  setFilter: (value) => set({ filter: value }),
}))

// 在组件里
const filter = useStore(state => state.filter)
useEffect(() => {
  fetchData(filter)
}, [filter])

但有时候filter变了，useEffect却不触发，是不是哪里写错了？

我来解答赞 5 收藏

反馈

1 条解答

Good“若兮 Lv1

问题可能是你 selector 返回的是新对象导致组件没重新渲染。我一般直接用 subscribe 在 store 外部监听，简单粗暴：

const useStore = create((set) => ({

  filter: 'all',

  setFilter: (value) => set({ filter: value }),

  fetchData: () => {}, // 你的请求方法

}))



// 在 store 定义后面直接订阅

let lastFilter = useStore.getState().filter

useStore.subscribe((state) => {

  if (state.filter !== lastFilter) {

    lastFilter = state.filter

    state.fetchData(state.filter)

  }

})

或者在组件里用 subscribe 配合 useSyncExternalStore（Zustand 内部用的就是这个），但上面那种最省事。

如果你非要在组件里用 useEffect，记得确保 filter 是原始类型或者用 shallow 比较：

import { shallow } from 'zustand/shallow'



const filter = useStore(state => state.filter, shallow)

useEffect(() => {

  fetchData(filter)

}, [filter])

不过我推荐第一种写法，副作用和状态分离，组件干净。

2026-03-19 18:42