如何在另一个选择器中调用ngrx选择器(该选择器接受要计算的参数)



我创建了两个选择器

  1. 获取所有网络-export const getAllNetworks = createSelector(getState, state => state.networks);

  2. 获取每个网络的设备

    createSelector(getAllNetworks, network => {
    const selectedNetwork = network.filter(net => net.id === networkId);
    return selectedNetwork[0]?.allDevices;
    });
    

我想创建第三个选择器,它使用第一个选择器获取网络,然后使用第二个选择器获取额外的数据

export const something = createSelector(
getAllNetworks, (networks) => {
networks.map(
// How can I call the selector selectNetworkDevices by passing the network ID here and get the devices [ex: selectNetworkDevices(network.id)]
)
}
)

您可以根据其他选择器使用不同的选择器,如:

export const selectUsers = createSelector(getState, (state) => state.users);
export const selectAccounts = (accountId?: string) => 
createSelector(getState, (state) => 
accountId ? state.accounts[accountId] : {}
);
export const something = (accountId?: string) => 
createSelector(
selectUsers,
selectAccounts(accountId),
(usersData, accountsData) => {
// some logic
return accountId ? 'an account id was provided' : 'no-id'
}
)

在你的组件中,你可以调用这个选择器,要么提供参数,要么不提供:

ngOnInit(): void {
this.store.select(something());  // without parameter
this.store.select(something('anAccountId')); // with parameter
}

更多信息在这里:链接

更新:

我们有2个selectors,selectAccountsmyOtherSelector。对于myOtherSelector,您可以通过调用其回调函数来重用其逻辑,而不是直接调用selectAccounts选择器。

export const selectUsers = createSelector(getState, (state) => state.users);
export const selectAccounts = (accountId?: string) => 
createSelector(getState, (state) => filterAccount(state));
export const myOtherSelector = createSelector(
selectUsers,
(users) => {
if (users) return users;
// here, you are reusing the callback function related to
// another selector
const accountFiltered = filterAccount([]);
return accountFiltered;
}
)
function filterAccount(accounts): Account {
//...some complex logic 
// ...
// ...
return account[index];
}

最新更新