Using ReactJS and redux-observable (so rxjs)
I have the following
const goToItemEpic = (action$, state$): Observable<any> => action$.pipe(
ofType(ItemsDetailsActions.goToItem),
concatMap((action: {payload: {projectId: string; datastoreId: string; itemId: string}}) => {
return [
ProjectActions.setCurrentProjectId({projectId: action.payload.projectId}),
DatastoreActions.setCurrentDatastoreId({datastoreId: action.payload.datastoreId}),
ItemsActions.setCurrentItemId({ itemId: action.payload.itemId }),
]
})
);
I would like that when the first action is dispatched, I wait another action before executing the next So I am trying like this
const goToItemEpic = (action$, state$): Observable<any> => action$.pipe(
ofType(ItemsDetailsActions.goToItem),
concatMap((action: {payload: {projectId: string; datastoreId: string; itemId: string}}) => {
return [
ProjectActions.setCurrentProjectId({projectId: action.payload.projectId}),
takeUntil(action$.ofType(DatastoreActions.getDatastoresSuccess)),
DatastoreActions.setCurrentDatastoreId({datastoreId: action.payload.datastoreId}),
takeUntil(action$.ofType(ItemsActions.getItemsListSuccess)),
ItemsActions.setCurrentItemId({ itemId: action.payload.itemId }),
]
})
);
or also
return [
ProjectActions.setCurrentProjectId({projectId: action.payload.projectId}),
delayWhen(pipe(action$.ofType(DatastoreActions.getDatastoresSuccess))),
DatastoreActions.setCurrentDatastoreId({datastoreId: action.payload.datastoreId}),
delayWhen(pipe(action$.ofType(ItemsActions.getItemsListSuccess))),
ItemsActions.setCurrentItemId({ itemId: action.payload.itemId }),
]
So basically I dispatch setCurrentProjectId
and I want to wait for getDatastoresSuccess
before setCurrentDatastoreId
is also dispatched.
is it possible to have this behavior ? I tried to use delayWhen
and takeUntil
but either I can't compile cause my syntax is wrong, or redux complain about
Uncaught Error: Actions must be plain objects. Use custom middleware for async actions.
EDIT :
I also tried but with Observable.js:106 Uncaught TypeError: Object(...)(...) is not a function
const goToItemEpic = (action$, state$): Observable<any> => action$.pipe(
ofType(ItemsDetailsActions.goToItem),
concatMap((action: {payload: {projectId: string; datastoreId: string; itemId: string}}) =>
of(ProjectActions.setCurrentProjectId({projectId: action.payload.projectId})).pipe(
action$.pipe(
ofType(DatastoreActions.getDatastoresSuccess),
concatMap(() =>
of(DatastoreActions.setCurrentDatastoreId({datastoreId: action.payload.datastoreId})).pipe(
action$.pipe(
ofType(ItemsActions.getItemsListSuccess),
concatMap(() =>
of(ItemsActions.setCurrentItemId({ itemId: action.payload.itemId }))
)
)
)
)
)
)
)
);