Instead of sending a bunch of AJAX requests in parallel, it might be more-efficient and easier on the API to make those requests in smaller sets.
const ofPermissionType = (
requiredPermissionType,
) => (
filter(({ permissionType }) => (
requiredPermissionType === permissionType
))
)
const fetchPermissionsEpic = (
action$,
state$,
{ ajax },
) => (
action$
.pipe(
ofType(FETCH_PERMISSIONS),
map(props => ({
...props,
accessToken: (
accessTokenSelector(
state$.value,
)
),
})),
mergeMap(({
accessToken,
permissionTypes,
}) => (
from(permissionTypes)
.pipe(
map(permissionType => (
of(permissionType)
.pipe(
takeUntil(
action$
.pipe(
ofType(FETCH_PERMISSIONS),
switchMap(({ permissionTypes }) => (
permissionTypes
)),
ofPermissionType(permissionType),
)
),
switchMap(() => (
ajax({
crossDomain: true,
headers: {
'Authorization': `Bearer ${accessToken}`,
},
url: (
'https://example.com/permissions'
.concat('?')
.concat('permissionType=')
.concat(permissionType)
),
})
.pipe(
pluck('response'),
map(permissionValue => ({
permissionType,
permissionValue,
})),
map(storePermission),
)
)),
)
)),
mergeAll(2),
)
)),
)
)