Zustand 选择器 function 在 state 更新时未触发

Question

所以我有两家 Zustand 商店。 一个存储配置信息，例如当前正在以模式查看哪个用户：

export const useConfigStore = create<ConfigStoreState>((set) => ({
    selectedUser: undefined,
    setSelectedUser: (user: User) => {
        set(
            produce((draft) => {
                draft.selectedUser = user;
            })
        );
    }
}));

..另一个存储其他应用程序数据：

export const usePermissionsStore = create<PermissionsStoreState>((set) => ({
    userPermissions: [],
    createDefaultPermissions: (users: Array<Users>) => {
        set(
            produce((draft) => {
                draft.userPermissions = users.map(x => new UserPermission(x))
            });
        )
    },
    getPermissionsForCurrentUser: () => {
        const selectedUser = useConfigStore.getState().selectedUser;
        return get().userPermissions.find(x => x.user.id === selectedUser.id);
    }
}));

在我的 React 组件中，我调用了一个 API 来获取用户并填充userPermissions并自动选择列表中的第一个用户。

问题是，无论何时更新userPermissions ， getPermissionsForCurrentUser() function 都不会重新触发或导致重新呈现。

const MyPage = () => {
    const { users, isLoading } = useFetchUsers();
    const setSelectedUser = useConfigStore((state) => state.setSelectedUser);

    // This selector isn't firing when `useConfigStore.selectedUser` updates
    const permissionsForSelectedUser = usePermissionsStore((state) => state.getPermissionsForCurrentUser());

    React.useEffect(() => {
        if(users.length > 0) {
            setSelectedUser(users[0]); 
        }
    }, [users]);

    React.useEffect(() => {
        // This useEffect triggers only once
        console.log("permissionsForSelectedUser updated...")
    }, [permissionsForSelectedUser]);

    return (
        <>
            {isLoading || !users || !permissionsForSelectedUser ? (
                <div>Loading...</div>
            ) : (
                <div>Permissions are available!: {permissionsForSelectedUser.xyz}</div>
            )}
        </>
    );
};

所以getPermissionsForCurrentUser()显然依赖于另一家商店中的selectedUser ，但它在更改时不会更新，而且我看不到指定它应该更新的方法。

问题是他们分成两个不同的商店吗？ 我该如何解决这个问题？

Answer 1

是否有充分的理由需要有两家商店？ 如果没有，通常当我使用 Zustand 时，我通常会使用切片在一家商店中分解我的 state。

以下链接演示了如何进行设置：

• https://github.com/pmndrs/zustand/blob/main/docs/guides/typescript.md#slices-pattern
• https://github.com/pmndrs/zustand/blob/main/docs/guides/slices-pattern.md

可以进行一些设置以准确获得您想要的方式。

但是，如果我要尝试将您的逻辑重写到一个商店中，它可能看起来像：

export interface SliceContext<T extends object> {
  set: SetState<T>;
  get: GetState<T>;
  api: StoreApi<T>;
  getContext: () => Context;
}

/** Typings aren't the best here **/
export type SliceCreator<T extends object, U extends object> = (sliceContext: SliceContext<T>) => U;

export interface Context {
 /** 
 * This can be shared services between different mutations 
 * HTTP client, logging, etc.
 */
}

export interface ConfigSlice {
  user?: User;
  setSelectedUser: (user: User) => void;
}

export interface PermissionsSlice {
  userPermissions: UserPermission[];
  createDefaultPermissions: (users: Users[])  => void;
  getPermissionsForCurrentUser: () => UserPermission | undefined;
}

export interface StoreState {
  config: ConfigSlice;
  permissions: PermissionsSlice;
}


export const createConfigSlice: SliceCreator<StoreState, ConfigSlice> = ({ set }: Context)  => ({
    selectedUser: undefined,
    setSelectedUser: (user: User) => {
        set(
            // fyi: you could also create a immer middleware
            produce((draft) => {
                draft.selectedUser = user;
            })
        );
    }
});

export const createPermissionsSlice: SliceCreator<StoreState, PermissionSlice> = ({ set, get }: Context)  => ({
    userPermissions: [],
    createDefaultPermissions: (users: Array<Users>) => {
        set(
            produce((draft) => {
                draft.userPermissions = users.map(x => new UserPermission(x))
            });
        )
    },
    getPermissionsForCurrentUser: () => {
        const currentState = get();
        const userPermissions = currentState.permissions.userPermissions;
        const selectedUser = currentState.config.selectedUser;
        return userPermissions.find(x => x.user.id === selectedUser.id);
    }
});

const createStore: StoreApi<StoreState> | StateCreator<StoreState, SetState<StoreState>> = (set, get, api) => {
   const sliceContext: SliceContext = {
     set,
     get,
     api,
     getContext: () => {
       // Totally optional, but you could instantiate all your 
       // shared services.
     }
   }

   return {
     config: createConfigSlice(sliceContext),
     permissions: createPermissionsSlice(sliceContext)
   }
}

// You can apply all the other middleware here... 
export const useStore = create(createStore);

然后在Page.tsx中使用它

const MyPage = () => {
    const { users, isLoading } = useFetchUsers();
    const { permissionsForSelectedUser, setSelectedUser } = useStore(state => ({
        permissionsForSelectedUser: state.permissions.getPermissionsForCurrentUser(),
        setSelectedUser: state.config.setSelectedUser
    }), shallow);


    React.useEffect(() => {
        if(users.length > 0) {
            setSelectedUser(users[0]); 
        }
    }, [users]);

    React.useEffect(() => {
        // This useEffect triggers only once
        console.log("permissionsForSelectedUser updated...")
    }, [permissionsForSelectedUser]);

    return (
        <>
            {isLoading || !users || !permissionsForSelectedUser ? (
                <div>Loading...</div>
            ) : (
                <div>Permissions are available!: {permissionsForSelectedUser.xyz}</div>
            )}
        </>
    );
};