如何将两个不同的属性分派给选择器？

Question

我有一个 selector 依赖于另一个，他们需要 userId 才能 "work"。

但现在我想创建一个接收“userId”的选择器，同时接收另一个名为“userFriend”的属性。

他抱怨这个参数传递，因为他只找到一个属性，即“userId”。

错误 1：

Property 'userFriend' does not exist on type '{ userId: any; }'

错误 2：

TS2339: Property 'userFriend' does not exist on type '{userId: any; } '.

34 (latestReadMessages, totalUnreadMessages, {userId, userFriend}) => {
                                                        ~~~~~~~~~~
src / app / services / store / chat / chat-selectors.service.ts: 34: 26 - error TS2769: No overload matches this call.
  Overload 1 of 8, '(mapFn: (state: object, props: {userId: any;}) => IChatFriendLatestMessageList, props ?: {userId: any;}): (source $: Observable <object>) => Observable <...> ', gave the following error.
    Argument of type '{userId: string; userFriend: IUser; } 'is not assignable to parameter of type' {userId: any; } '.
      Object literal may only specify known properties, and 'userFriend' does not exist in type '{userId: any; } '.
  Overload 2 of 8, '(key1: "user" | "chat", key2: "loading" | "data" | "dataError" | "ids" | "entities"): (source $: Observable <IStoreState>) = > Observable <any> ', gave the following error.
    Argument of type 'MemoizedSelectorWithProps <object, {userId: any; }, IChatFriendLatestMessageList, DefaultProjectorFn <IChatFriendLatestMessageList>> 'is not assignable to parameter of type' "user" | "chat" '.
      Type 'MemoizedSelectorWithProps <object, {userId: any; }, IChatFriendLatestMessageList, DefaultProjectorFn <IChatFriendLatestMessageList>> 'is not assignable to type' "chat" '.

34 return this.store.pipe (select (selector.getFriendLatestMessageList, {userId, userFriend}));
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~

选择器：

export const messagesById = createSelector(selectAll, (chat: IChat[], { userId }) => {
  let messageIndex = 0;
  return chat.map((props, index) => {
    if (props.id === userId) {
      messageIndex = index;
      return props.messages;
    } else {
      return [];
    }
  })[messageIndex];
});

export const isLoading = createSelector(FEATURE_SELECTOR, ({ loading }) => loading);
export const error = createSelector(FEATURE_SELECTOR, ({ dataError }) => dataError);
export const friendMessages = createSelector(messagesById, messages => messages.filter(msg => !msg.isMain));
export const friendLatestMessage = createSelector(friendMessages, messages => messages[messages.length - 1]);
export const friendLatestReadMessages = createSelector(friendMessages, messages => messages.filter(msg => msg.isRead));
export const friendLatestUnreadMessages = createSelector(friendMessages, messages =>
  messages.filter(msg => !msg.isRead)
);
export const totalUnreadMessagesFriend = createSelector(friendLatestUnreadMessages, messages => messages.length);

export const getFriendLatestMessageList = createSelector(
  friendLatestMessage,
  totalUnreadMessagesFriend,

  (latestReadMessages, totalUnreadMessages, { userId, userFriend }) => {
    const latestMessageList: IChatFriendLatestMessageList = {
      user: userFriend.id,
      informations: {
        chatMessage: [latestReadMessages],
        isNewLastMessage: !userFriend.isClicked && totalUnreadMessages > 0,
        total: totalUnreadMessages,
      },
    };

    return latestMessageList;
  }
);

调度选择器服务：

getFriendLatestMessageListById(userId: string, user: IUser): Observable<IChatFriendLatestMessageList> {
    return this.store.pipe(select(selector.getFriendLatestMessageList, { userId, user }));
}

接口：

export interface IChatFriendLatestMessageList {
    userFriend: IUser;
    informations: {
        chatMessage: IChatMessage[];
        isNewLastMessage: boolean;
        total: number;
    };
}

错误屏幕截图

Answer 1

问题是因为这个选择器有自己的属性，同时它使用了也有自己属性的父选择器。

NGRX 不支持它，要使其正常工作，我们需要封装父选择器。

export const getFriendLatestMessageList = createSelector(
    s => s, // selecting the whole store.
    (store, { userId, userFriend }) => {
        // selecting our state.
        const latestReadMessages = friendLatestMessage(store, { userId });
        const totalUnreadMessages = totalUnreadMessagesFriend(store, { userId });
        // using them.
        const latestMessageList: IChatFriendLatestMessageList = {
            user: userFriend,
            informations: {
                chatMessage: [latestReadMessages],
                isNewLastMessage: !userFriend.isClicked && totalUnreadMessages > 0,
                total: totalUnreadMessages,
            },
        };

        return latestMessageList;
    }
);

Answer 2

尝试更改函数参数的名称

getFriendLatestMessageListById(userId: string, userFriend: IUser): Observable<IChatFriendLatestMessageList> {
  return this.store.pipe(select(selector.getFriendLatestMessageList, { userId, userFriend}));
}

如何将两个不同的属性分派给选择器？

How do I dispatch two different properties to the selector?

typescript

ngrx

angular