redux - 是否可以通过在 useSelector 中传递一组键来从 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 数组或其他任何东西来使用 useSelector 钩子从 redux 存储中选择多个实体？

我试图以这种方式解决它：

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

但不幸的是，它违反了反应钩子的规则：你不能在循环中调用钩子。

标签： reduxreact-reduxredux-toolkit

Answer 1

以下是另一种方式：

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