Zustand带初始化props的store调用updateName无更新问题求助

我按照Zustand文档创建了支持初始化props的Store，但调用updateName方法时，name状态完全没变化。去掉初始化props的逻辑后，一切正常。

错误的Store代码 #

export const useNameStore = (initProps?: Partial<NameStoreProps>) =>
  create<NameStore>()(
    subscribeWithSelector((set) => ({
      ...defaultProps,
      ...initProps,
      updateName: (name) => set(() => ({ name })),
    })),
  );

组件使用方式 #

const [name, updateName] = useNameStore({ name: "init" })((state) => [
    state.name,
    state.updateName,
  ]);

移除初始化Props后的正常代码 #

export const useNameStore =
  create<NameStore>()(
    subscribeWithSelector((set) => ({
      ...defaultProps,
      updateName: (name) => set(() => ({ name })),
    })),
  );

问题原因&解决方案 #

问题根源 #

你现在的写法是每次调用useNameStore({ name: "init" })都会生成一个全新的Store实例。组件每次渲染时都会重新执行这个函数创建新Store，导致你调用的updateName属于旧的Store实例，而组件订阅的是新实例的状态，自然看不到更新效果。

正确实现方式 #

按照Zustand的规范，应该把初始化props通过create的参数传递，确保整个应用共享同一个Store实例：

// 修正后的Store代码
export const useNameStore = create<NameStore, [Partial<NameStoreProps>?]>(
  subscribeWithSelector((set, get, api) => {
    // 取出传入的初始化props，没有则用空对象
    const initProps = api.args[0] ?? {};
    return {
      ...defaultProps,
      ...initProps,
      updateName: (name) => set(() => ({ name })),
    };
  })
);

组件中正确使用 #

把初始化props作为第二个参数传入useNameStore：

const [name, updateName] = useNameStore(
  (state) => [state.name, state.updateName],
  { name: "init" }
);

如果需要在多个组件复用相同的初始化参数，可以封装一个自定义hook：

export const useNamedStoreWithInit = () => {
  return useNameStore(
    (state) => [state.name, state.updateName],
    { name: "init" }
  );
};

这样就能保证所有组件订阅的是同一个Store实例，调用updateName后状态会正确更新并同步到组件中。

内容的提问来源于stack exchange，提问作者Dhruv Pandey