I'm new to RxJS so sorry if it doesn't make much sense.
Let's say I want to have a reusable epic for fetching a user that will be invoked by action from an app load epic.
Oversimplified example:
const getUserEpic = action$ =>
action$.pipe(
ofType(GET_USER_REQUEST),
switchMap(action => from(service.fetchUser(action.userId).pipe(
mapTo({ type: GET_USER_SUCCESS })))
),
);
const appLoadEpic = action$ =>
action$.pipe(
ofType(LOAD_APP_REQUEST),
map(() => of({ type: GET_USER_REQUEST }, { type: SOME_OTHER_REQUEST }))
);
What if I wanted to call LOAD_APP_SUCCESS after all of the invoked epics (getUser etc.) finish? It'd be great if it could be done in the appLoadEpic but I'm afraid it's not possible.
The way I would suggest doing it is combining the the individual epics into a "meta"-epic. That is, you can use the individual streams to listen to their individual events and the propagate them when all the merged streams are completed.
const getUserEpic = action$ => ...
const someOtherEpic = action$ => ...
// Creates an epic that merges all the results from each provided epic
const initializationEpic = combineEpics(getUserEpic, someOtherEpic)
const appLoadEpic = (action$, state$) => {
// Runs the new epic with the action and state values.
const onLoad$ = initializationEpic(action$, state$).pipe(
endWith({type: LOAD_APP_SUCCESS})
)
// Listen for the load app request before subscribing to the initialization
action$.pipe(
ofType(LOAD_APP_REQUEST),
mergeMapTo(onLoad$),
)
}
If you are feeling fancy and don't want to have to inject the epics via import, you can also dynamically inject epics The docs detail a way to inject the epic asynchronously, meaning that instead of file injection you could include it as part of the action body during start up, this might make testing a bit easier.
const appLoadEpic = (action$, state$) => {
// Listen for the load app request before subscribing to the initialization
action$.pipe(
ofType(LOAD_APP_REQUEST),
// Now the epic is injected during the app loading, and you run it inline
// here. This makes it easy to mock it during testing
mergeMap(({epic}) => epic(action$, state$).pipe(endWith({type: LOAD_APP_SUCCESS}))),
)
}
Related
I have to create a queue of ajax requests and group the result but i have no clue about to accomplish this.
Let's say i have an array like this:
const actors = [
"Al Pacino",
"Robert De Niro"
];
I have to iterate over it and for each values make an api call:
export const getMovies = action$ =>
action$.pipe(
ofType(LOAD_REQUEST),
// iterate over the array
// make api call with the actor name
// for each result, make a second api call with the id of the actor (get in the response.results.id)
// group the result in an array with all films of all actors of the array passed in the payload
);
Im stuck with switchMap, pipe ... and don't know the correct way to accomplish this.
Edit Tried your solution Valeriy but got this error:
export const getMovies = action$ =>
action$.pipe(
ofType(LOAD_REQUEST),
switchMap(({ payload }) =>
combineLatest(
payload.map(a => {
return ajax
.getJSON(actor(a))
.pipe(map(response => console.log(response)));
})
)
)
);
TypeError: You provided 'function (source) {
return source.lift.call(Object(_observable_from__WEBPACK_IMPORTED_MODULE_2__["from"])([source].concat(observables)), new _observable_combineLatest__WEBPACK_IMPORTED_MODULE_1__["CombineLatestOperator"](project));
}' where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.
If I understand you correctly, you are trying to achieve something like this:
export const getMovies = action$ => action$.pipe(
ofType(LOAD_REQUEST),
switchMap(() => {
// group the result in an array with all films of all actors of the array passed in the payload
return combineLatest(
// iterate over the array
...actors.map(actorName => {
// make api call with the actor name
return loadActor(actorName).pipe(
// for each result, make a second api call with the id of the actor (get in the response.results.id)
switchMap(response => loadActorFilms(response.results.id))
);
})
);
})
);
I've used combineLatest to group multiple observables together.
I'm a beginner in RxJS so sorry if this doesn't make sense.
The current flow in time looks like this:
REMOVE_USER -----------------------> SUCCESS
---------------GET_DEVICE--->SUCCESS--------
The high-level goal is to skip fetching device when user is being removed.
Oversimplified epics:
const getDeviceEpic = action$ => action$.pipe(
ofType('GET_DEVICE_REQUEST'),
mergeMap(() => from(service...).pipe(
mapTo({ type: 'GET_DEVICE_SUCCESS' }))
))
const removeUser = action$ => action$.pipe(
ofType('REMOVE_USER_REQUEST'),
mergeMap(() => from(service...).pipe(
mapTo({ type: 'REMOVE_USER_SUCCESS' }))
)
)
How would I approach that?
I'm not sure if I can somehow add e.g. takeUntil(removeUserAPICall$) to device app. Or perhaps check if REMOVE_USER_REQUEST has been fired and then wait for REMOVE_USER_SUCCESS to continue.
Potentially, you could achieve that with windowToggle:
In your case "on" is REMOVE_USER_SUCCESS and "off" is REMOVE_USER_REQUEST.
So we'll be listening to GET_DEVICE_REQUEST between REMOVE_USER_SUCCESS and REMOVE_USER_REQUEST.
Note that we'll have to start with our filter open, by prepending startWith(void 0) to the "on" stream.
E.g.:
const getDeviceEpic = action$ => action$.pipe(
ofType('GET_DEVICE_REQUEST'),
windowToggle(
action$.pipe(ofType('REMOVE_USER_SUCCESS'), startWith(void 0)),
()=>action$.pipe(ofType('REMOVE_USER_REQUEST')
),
mergeMap(() => from(service...).pipe(
mapTo({ type: 'GET_DEVICE_SUCCESS' }))
))
const removeUser = action$ => action$.pipe(
ofType('REMOVE_USER_REQUEST'),
mergeMap(() => from(service...).pipe(
mapTo({ type: 'REMOVE_USER_SUCCESS' }))
)
)
* warning: written in a notepad
Yet, imho, it's also fine to have a flag on the store (maybe, as an indication of the state).
More about pausing and muting streams in my article "Pausable Observables in RxJS".
--
Hope this helps
I have the following searchService.search method that returns a forkJoin of two api calls.
I want the calls to execute simultaneously which they are but I also want each response back as a single object that can be passed into my SearchSuccess action and processed immediately without waiting for all calls to complete. Currently they are returning as an array of responses and only upon completion of both API calls - as this is what forkJoin is used for.
My issue is that I'm struggling to find another operator that does what I want.
Or perhaps the code pattern requires some redesign?
action:
#Effect()
trySearch: Observable<Action> = this.actions$.pipe(
ofType(SearchActionTypes.TrySearch),
switchMap((action: TrySearch) =>
this.searchService.search(action.payload)
.pipe(
map((data) => new SearchSuccess(data)),
catchError(error => of(new SearchFail(error))),
),
),
);
SearchService (snippet):
search(searchForm: SearchForm): Observable<any> {
const returnArray = [];
if (searchForm.searchClients) {
const searchClientParams = new Search();
searchClientParams.searchPhrase = searchForm.searchPhrase;
searchClientParams.type = SearchType.Client;
const searchClients = this.objectSearch(searchClientParams);
returnArray.push(searchClients);
}
if (searchForm.searchContacts) {
const searchContactParams = new Search();
searchContactParams.searchPhrase = searchForm.searchPhrase;
searchContactParams.type = SearchType.Contact;
const searchContacts = this.objectSearch(searchContactParams);
returnArray.push(searchContacts);
}
return Observable.forkJoin(returnArray);
}
If I understand it correctly returnArray contains two Observables and you want to wait until they both complete but still you want to emit each result separately.
Since forkJoin emits all results in a array you could just unwrap it with mergeMap (or concatMap):
this.searchService.search(action.payload)
.pipe(
mergeMap(results => results),
map((data) => new SearchSuccess(data)),
catchError(error => of(new SearchFail(error))),
),
I'm trying to create an Epic that queues actions to be dispatched, in this case, the actions are messages to be displayed with a snackbar so that, for example, three errors happened almost simultaneously, and I want to display the three error messages with a SnackBar, the Epic should dispatch an action to display the first one for 3 seconds, then display the second one for 3 seconds and then the third one for 3 seconds.
Also if one of the snackbars gets closed, the second one in the "queue" should be displayed and so on. What I'm doing at the moment is dispatching the action that displays the message in Epics that catch the errors, then I'm creating Epics dispatch the action to close the snackbar after 3 seconds of delay, with the action CLOSE_SNACKBAR. Which methods should I use in order to achieve this?
A basic Epic I've implemented looks like this, basically the action that changes the state from the snackbar to open and displays the error message is dispatched from another epic, the one that catches the error, and then another Epic dispatches the action to close the snackbar after 3 seconds, but I haven't figured out how to do this queueing kind of action so that each message can be displayed for 3 seconds each, right now if an error occurs right after the first one, the second message will be displayed without waiting the 3 seconds after the previous message.
Here are some basic examples of my epics (Ignore de request part, ):
const getUserEpic = (action$, store) => (
action$.ofType(actionTypes.DATA_REQUESTED)
.switchMap(action => {
const { orderData, queryData, pagerData } = store.getState().usuario.list;
const params = constructParams(queryData, pagerData, orderData);
return Observable.defer(() => axios.get(`users`, { params }))
.retry(NETWORK.RETRIES).mergeMap(response => {
Observable.of(actions.dataRequestSucceeded(response.data.rows))
}).catch(error => Observable.concat(
Observable.of(actions.dataRequestFailed(error)),
Observable.of({
type:'DISPLAY_DATA_REQUEST_FAILED_MESSAGE',
open:true,
message:'Failed to get Users Data'
})
));
})
)
const getRoleEpic = (action$, store) => (
action$.ofType(actionTypes.DATA_REQUESTED)
.switchMap(action => {
const { orderData, queryData, pagerData } = store.getState().usuario.list;
const params = constructParams(queryData, pagerData, orderData);
return Observable.defer(() => axios.get(`role`, { params }))
.retry(NETWORK.RETRIES).mergeMap(response => {
Observable.of(actions.dataRequestSucceeded(response.data.rows))
}).catch(error => Observable.concat(
Observable.of(actions.dataRequestFailed(error)),
Observable.of({
type:'DISPLAY_DATA_REQUEST_FAILED_MESSAGE',
open:true,
message:'Failed to get Roles Data'
})
));
})
)
This two epics do basically the seme, they are doing a GET request to the backend, but if they fail, they dispatch the action that opens the snackbar with an error message, and both error messages are different.
And this one is the epic that currently closes the Snackbar after 3 seconds:
const displayDataRequestFailedEpic = (action$, store) => (
action$.ofType(actionTypes.DISPLAY_DATA_REQUEST_FAILED)
.debounceTime(3e3)
.switchMap( action => {
return Observable.of({
type:'CLOSE_SNACKBAR',
open:false,
message:''
})
})
)
Imagine I do both requests really fast and both of them fail. I want show all the errors that happened, one after another for 3 seconds each,
This hasn't been tested...
First, need to separate the action that displays messages from the action that is causing the display:
const getUserEpic = (action$, store) => (
action$.ofType(actionTypes.DATA_REQUESTED)
.switchMap(action => {
const { orderData, queryData, pagerData } = store.getState().usuario.list;
const params = constructParams(queryData, pagerData, orderData);
return Observable.defer(() => axios.get(`users`, { params }))
.retry(NETWORK.RETRIES).mergeMap(response => {
return Observable.of(actions.dataRequestSucceeded(response.data.rows))
}).catch(error => Observable.of(actions.dateRequestFailed(error))
// }).catch(error => Observable.concat(
// Observable.of(actions.dataRequestFailed(error)),
//
// this will be handled elsewhere
//
// Observable.of({
// type:'DISPLAY_DATA_REQUEST_FAILED_MESSAGE',
// open:true,
// message:'Failed to get Users Data'
// })
));
})
)
next, need to define some method that creates the DISPLAY_MESSAGE action from whatever action is triggering the message. Included in the action should be a unique id used to track which message needs to be closed.
Finally, use concatMap() to create and destroy the messages.
const displayEpic = action$ => action$
.ofType(actionTypes.DATA_REQUEST_FAILED)
.concatMap(action => {
const messageAction = actions.displayMessage(action);
const { id } = messageAction;
return Rx.Observable.merge(
Rx.Observable.of(messageAction),
Rx.Observable.of(actions.closeMessage(id))
.delay(3000)
.takeUntil(action$
.ofType(actionTypes.CLOSE_MESSAGE)
.filter(a => a.id === id))
);
});
Might be that I'm a noob and not fully understanding how this stuff should work yet, but I have an epic in redux-observable in which I want to use as a way to create a promise which will dispatch an action and wait for a different action before resolving. I've got it working by mapping the action to '__IGNORE__' but I really don't want to do that. Is there any way to just have an epic handle an action, but not pass anything else on?
Here's my code:
export const waitFor = (type, action) => new Promise((resolve, reject) => {
const waitForResult = action$ => action$.ofType(type).do(() => resolve()).mapTo({type: "___IGNORE___"});
registerEpic(waitForResult);
action();
});
You can throw away any next'd values from an observable chain by using the .ignoreElements() RxJS operator
action$.ofType(type)
.do(() => resolve())
.ignoreElements();
Another way of doing this (no more right or wrong) is to create an anonymous Observable that just subscribes.
const waitForResultEpic = action$ => new Observable(observer =>
action$.ofType(type)
.subscribe(() => resolve())
);
This is implicitly returning the subscription we create, so that it's attached to the lifecycle of our rootEpic as well. Because we never call observer.next(), this epic never emits any values; just like ignoreElements().
Although you didn't ask, you may eventually notice that your epic will run forever, listening for that incoming action matching the type variable. This may not be not what you want, if you want to match once then complete.
You can accomplish that using .take(1) operator.
const waitForResult = action$ =>
action$.ofType(type)
.take(1)
.do(() => resolve())
.ignoreElements();
Or
const waitForResult = action$ => new Observable(observer =>
action$.ofType(type)
.take(1)
.subscribe({
next: () => resolve(),
error: err => observer.error(err),
complete: () => observer.complete()
})
);
This will only match once per the life of the application--once received it will never do it again.