我创建了两个选择器
-
获取所有网络-
export const getAllNetworks = createSelector(getState, state => state.networks);
-
获取每个网络的设备
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
,selectAccounts
和myOtherSelector
。对于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];
}