Hi there, I have a question about error handling in epics. I notice on https://redux-observable.js.org/docs/recipes/ErrorHandling.html it says the catchError should not reach the action$.pipe, but the way I think about catches generally I would expect an action$.pipe(..., catchError) to guard against that - like a global catch for the epic. Am I misunderstanding this?
you can return the second arg that catchError receives, which is the original observable. This would restart it
if you fire an api request based on an action, you can put
retry(3) inside the switchMap operator for instance. This doesn't make much sense within the top level action$.pipe
Here is what I'm using, logs the error in AppInsights as well
export const errorCatcher = (epic) => (...args) =>
epic(...args).pipe(
catchError((error, caught$) => {
console.error(error);
AppInsights.trackException(error, "Epic");
return caught$;
}),
);
at least I know that wasn't the problem then, thanks!
I am facing the problem of setting up redux action in getInitialProps of next.js
static async getInitialProps({ store, isServer }) {
const state$ = new StateObservable(new Subject(), store.getState())
const resultAction = await rootEpic(
of(actions.fetchCharacter(isServer)),
state$
).toPromise() // we need to convert Observable to Promise
store.dispatch(resultAction)
return { isServer }
}
I check the next.js -canary, here is example to set up, I feel it is a little bit old, is there any convenient way?
i am upgrading from 0.x to 1.x
and i have an epic here that dispatches an action and then a subsequent action that triggers another epic
problem is, until now the second epic could rely on the fact that the reducers have been run to update the state after the first action has been dispatched
obviously now that is no longer the case or is it?
You have to use switchMap (or mergeMap), put in a merge observable, then an action listener as arg 1 and of(action) for the second. @hamfatfat @voy
Hi all,
I have some issue with redux-observable
I have two actions PRODUCTS_FETCHED and PRODUCT_SELECTED, and in some cases PRODUCT_SELECTED appears before PRODUCTS_FETCHED
and what i want to do is the dispatch PRODUCTS_FETCHED before PRODUCT_SELECTED.
So for me, there are two cases that i can resolve it
- When i see
PRODUCT_SELECTEDi will dispatchPRODUCTS_FETCHED - I can use
delayWhenand to check my product list and if it empty i will wait forPRODUCTS_FETCHED
const awaitForProductFetched = (actions$: ActionsObservable, state$: StateObservable) => {
const resourceFetched$ = actions$.pipe(ofType('PRODUCTS_FETCHED'))
return resourceFetched$.pipe(filter(() => getProductList(state$.value)))
}
export const mediaEpic: Epic = (actions$, state$: StateObservable, { api }: EpicDependencies) =>
actions$.pipe(
ofType('PRODUCT_SELECTED'),
switchMap((action: ProductSelected) => api.getMediaList(getCurrentOperationCode(state$.value), action.payload.productKey).pipe(
delayWhen(() => isEmpty(getProductList(state$.value))
? awaitForProductFetched(actions$, state$)
: of({})
),
map(({ response }: GetMediaListApiRequest) => mediaListFetched(sort(sortByOrderProperty, response))),
catchError(mediaFetchError => of(`Error in mediaEpic: ${mediaFetchError}`))
))
)This is my code but i don’t know what i missing. :pray::skin-tone-4:
Hello Guys, I have a situation. I have actions A & B . I wrote an epic X which looks over action A and B and triggers some validations(ACTION V1, V2, V3). I wrote another epic Y for analytics of the validation. For which, I am using the observables I created in V1, V2 & V3. I am using zip operator in epic Y which looks for action V1 & V2 and triggers analytics related event. The problem is the epic Y is using outdated values(data from previous validation) emitted from V1.
I'm having some issues getting a websocket observable to reconnect on disconnect - created a stack overflow issue here:https://stackoverflow.com/questions/57282659/reconnect-websocket-rxjs?noredirect=1#comment101061128_57282659
Would greatly appreciate any help the community can offer
it just shows a blank page in the view
Hi all,
React Native: making a chat module using (sockets), in which i have to send image. but im stuck on observable structure. someone hand it over to me. how can i send back response to socket after getting response of image upload to server.
i made a fun. in chat service which will post image to server.
but after getting response from server i've to convert my chat message object to JSON.strigify(messageObject) and send to socket. (socket.send(JSON.strigify(messageObject)));
async uploadImage({ image, uid }, storeState) {
try {
const authState = storeState.auth;
const url =
'http://ec2-54-213-21-55.us-west-2.compute.amazonaws.com/es-dev/public/api/storage';
const token = Bearer ${authState.token.access_token};
const upload = {
uri: image.uri,
type: image.type,
name: image.fileName
};
const formData = new FormData();
formData.append('file', upload);
formData.append('type', 'image');
const response = fetch(url, {
method: 'POST',
body: formData,
headers: {
Accept: 'application/json',
Authorization: token
}
});
return response;
} catch (error) {
throw error;
}}
@ashishsantikari If you show some code, that will help solve the issue. I hear the problem, but it sounds like the issue is that V1's values are not the latest values with
zip. Where are you creating observables for those values? Why not dispatch actions? Or am I misunderstanding? This is why showing code is helpful.
@mattoni The way I reconnect a WebSocket observable on disconnect is I have an action trigger the WebSocket connection. When it fails, a
catchError which run. Have that dispatch an action to call "START_WEBSOCKET_SERVER" or whatever you're using again.
@evertbouw I didn't actually know that
catchError had a second argument! Thanks for that info :). I've always just returned of(null) or EMPTY, but I usually want nothing else to happen in that case other than logging the error. Nice to know there are alternatives.
@umair.appiskey_gitlab The code you're showing doesn't show anything about WebSockets; it's all HTTP. Are you saying how do you send back
formData over WebSockets? Probably the same way you are sending back a message object in your other application. Just figure out a way to serialize the data. You might need to base64 the data first, then send it as JSON.
Question related to the following . . .
export const searchProjectsObservable = (
action$: ActionsObservable<ActionType<typeof searchProjectsRequestAction>>,
state$: StateObservable<State>
) => {
return action$.ofType(ActionTypeEnum.SearchEventsRequest).pipe(
switchMap(() => {
const { projects, isLoading } = state$.value.assets;
console.log('Still loading assets', isLoading);
const body = buildBody(assets);
return ajax.post("/projects/search", body, true).pipe(
mergeMap((records: ProjectRecord[]) => {
return of(getProjectsSuccess(projects)))
}),
catchError((error) => of(getProjectsFailure(error)))
);
})
);
};I need to wait until I've loaded assets before making the API call to fetch projects. How can I do this? I'm assuming that there is a way to wait for a assetsLoadedSuccess or assetsLoadedFailure action.
@adrice727 So you can wait on an action by doing switchMap -> combineLatest on both observables. But the better solution is to listen for $state to update and then see if that value changed from before.
That would be:
// ...
switchMap(() => (
$state
.pipe(
map(selectAssets),
filter(Boolean),
take(1),
)
)),
switchMap(() => (
ajax
.post(/* etc */)
)),
// ...
Thanks @Sawtaytoes. I didn't even think about listening to
$state. I actually ended up doing something like: return action$.ofType(ActionTypeEnum.SearchProjectsRequest).pipe(
switchMap(() => {
const { isLoading, assets } = state$.value.assets;
return action$
.ofType(ActionTypeEnum.GetAssetsSuccess, ActionTypeEnum.GetAssetsFailure)
.pipe(
take(1),
switchMap(() => {
// do ajax stuff . . .
})
);
})
);