具有相同 UI 但来自 redux 的不同数据的组件

Question

有一个组件，但来自 redux 存储的数据不同，UI 是相同的，只是更改数据来自哪里我使用 useSelector，所以我通过 props 传递选择器。

• 我的第一个问题是通过 props 传递选择器是好的还是不好的做法？
• 第二个问题是我遇到了类型错误，我不知道应该如何正确输入

Argument of type 'OutputSelector<MergeStateI, GrocerieResponse[], (res: GroceriesInitStateI) => GrocerieResponse[]> | OutputSelector<...>' is not assignable to parameter of type '(state: MergeStateI) => GrocerieResponse[]'.
  Type 'OutputSelector<MergeStateI, AgencyResponse[], (res: AgenciesInitStateI) => AgencyResponse[]>' is not assignable to type '(state: MergeStateI) => GrocerieResponse[]'.
    Type 'AgencyResponse[]' is not assignable to type 'GrocerieResponse[]'.
      Property 'grocerieImages' is missing in type 'AgencyResponse' but required in type 'GrocerieResponse'.

选择器

export const selectFavoriteGroceries = createSelector(
    [selectGroceries],
    (groceries: GroceriesInitStateI) => groceries.favoriteGroceries
);

export const selectFavoriteAgencies = createSelector(
    [selectAgencies],
    (agencies: AgenciesInitStateI) => agencies.favoriteAgencies
);

组件

interface ComponentProps {
    selector:
        | OutputSelector<
              MergeStateI,
              GrocerieResponse[],
              (res: GroceriesInitStateI) => GrocerieResponse[]
          >
        | OutputSelector<
              MergeStateI,
              AgencyResponse[],
              (res: AgenciesInitStateI) => AgencyResponse[]
          >;
}

export const Restaurant: React.FC<RestaurantProps> = (
    props: RestaurantProps
) => {
    const data = useSelector(props.selector);
}

Answer 1

我不会通过 props 传递选择器函数，而是选择父组件中的数据，然后将该数据作为 props 传递。