是否可以通过在 useSelector 中传递一组键来 select 来自 redux 存储的多个实体？

Question

供您参考，我有以下代码：

const companyPagesAdapter = createEntityAdapter<CompanyPage>(
        {
            selectId: model => model.pageNumber,
            sortComparer: (a, b) => a.pageNumber>b.pageNumber? 1 : a.pageNumber<b.pageNumber? -1 : 0
        }
    );

type CompanyPage = {
    companyIds: number[],
    pageNumber: number,
    isDirty: boolean
}

所以我在 companyPagesSlice 切片中的状态如下所示：

{
  ids: number[],
  entities: {
    [key: number]: CompanyPage;
  }
}

然后在我的组件中，我为这样的页面提取公司 ID：

const companyIds = useSelector(state => state.companyPages.entities[pageNumber].companyIds);

我的 companySlice 切片状态如下所示：

{
  ids: number[],
  entities: {
    [key: number]: ICompany;
  }
}

ICompany 所在的位置：

type ICompany = {
    id: number;
    name: string;
    status: Status;
    country: string;
    city: string;
    address: string;
    zipCode: number;
}

是否有任何可能的方法通过传递 id 数组或其他任何东西来 select 来自 redux 存储的多个实体与 useSelector 挂钩？

我试过这样解决的：

const companies = companyIds?.map(item => {
        const company = useSelector(state => selectCompanyById(state.companies, item));
        if (!company)
            return;
        return company;
    })

但不幸的是它打破了反应钩子的规则：你不能在循环中唤起钩子。

Answer 1

根据您的具体需求，您可以select所有公司（allCompanies），然后只选择您想要的公司：

const companyIds = useSelector(state => state.companyPages.entities[pageNumber].companyIds);
const allCompanies = useSelector(state => state.company);

const companies = Object.values(allCompanies).filter(({ids}) => companyIds.some(id => ids.includes(id)))

您可以使用 refs 和 effects 来提高性能，但它会变得更复杂。因为 React 开箱即用，所以我将从上面向您展示的开始。

Answer 2

以下是您可以用另一种方式进行的方法：

const companies = useSelector(state => {
        return companyIds?.map(item => {
            if (state.companies.entities[item])
                return state.companies.entities[item];
            return;
        });
    });

是否可以通过在 useSelector 中传递一组键来 select 来自 redux 存储的多个实体？

Is it possible to select multiple entities from redux store by passing an array of keys in useSelector?

redux

react-redux

redux-toolkit