如何监听Zustand Store中单个属性的变化？

嘿，我来给你唠唠怎么监听Zustand Store里单个属性的变化～

一、React组件内监听（最常用场景） #

在React组件里，咱们可以结合Zustand的useStore钩子和React的useEffect来精准盯紧单个属性，比如你Store里的activeBear：

先用useStore只提取你关心的activeBear属性，这样组件只会在这个属性变化时重渲染，然后配合useEffect在属性变动时执行你要的逻辑：

import { useStore } from './你的BearStore文件路径';
import { useEffect } from 'react';

function BearProfile() {
  // 只订阅activeBear的变化，Store里其他属性改动不会触发这个组件重渲染
  const activeBear = useStore(state => state.activeBear);

  // 当activeBear变化时，这里的逻辑就会跑
  useEffect(() => {
    if (!activeBear) return;
    
    console.log('活跃的熊更新啦！ID是：', activeBear.id);
    // 你可以在这里做任何你需要的操作，比如更新页面状态、发起关联请求之类的
  }, [activeBear]); // 把activeBear放进依赖数组，确保只在它变化时触发

  return (
    <div className="bear-card">
      <h3>熊ID：{activeBear?.id}</h3>
      <p>喜欢的颜色：{activeBear?.favoriteColor}</p>
      <p>喜欢的食物：{activeBear?.favoriteFood}</p>
    </div>
  );
}

二、组件外部监听（非React环境/工具函数） #

要是你需要在React组件之外监听属性变化，比如在工具函数、全局逻辑里，那可以用Zustand Store自带的subscribe方法：

import { bearStore } from './你的BearStore文件路径';

// 订阅activeBear的变化
const unsubscribe = bearStore.subscribe(
  (state) => state.activeBear, // 指定要监听的单个属性
  (newActiveBear, oldActiveBear) => {
    // 注意：如果是引用类型（比如对象），这里是浅比较，要是对象内部属性变了但引用没变，不会触发
    if (newActiveBear !== oldActiveBear) {
      console.log('活跃熊更新了：', newActiveBear);
      // 执行你的监听逻辑
    }
  }
);

// 重要！不需要监听的时候一定要取消订阅，避免内存泄漏
// 比如在组件卸载时调用 unsubscribe();

小提醒：处理引用类型的变化 #

因为activeBear是对象类型（引用类型），如果你的更新逻辑是直接修改原对象的属性（比如activeBear.favoriteColor = 'red'），那Zustand的浅比较会认为属性没变化，不会触发监听。所以一定要用不可变更新的方式修改Store：

比如在你的fetchBear方法里，应该返回新的对象：

fetchBear: async () => {
  // 模拟异步请求获取熊的数据
  const fetchedBearData = await fetch('/api/bears/1').then(res => res.json());
  
  // 用set方法传入新的对象，而不是修改原对象
  set({
    activeBear: { ...fetchedBearData } // 展开创建新对象，保证引用变化
  });
}

如果需要监听对象内部单个属性（比如activeBear.favoriteColor），那可以在选择器里直接指定这个属性：

// 组件内只监听favoriteColor的变化
const bearFavoriteColor = useStore(state => state.activeBear?.favoriteColor);

useEffect(() => {
  console.log('熊喜欢的颜色变啦：', bearFavoriteColor);
}, [bearFavoriteColor]);

备注：内容来源于stack exchange，提问作者Carson Wood