Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Aug 25 21:38
    greenkeeper[bot] labeled #656
  • Aug 25 21:37
    greenkeeper[bot] opened #656
  • Aug 25 21:35

    greenkeeper[bot] on babel-eslint-10.0.3

    chore(package): update babel-es… (compare)

  • Aug 24 03:45
    greenkeeper[bot] commented #655
  • Aug 24 03:44

    greenkeeper[bot] on eslint-6.2.2

    chore(package): update eslint t… (compare)

  • Aug 20 22:16
    jayphelps closed #654
  • Aug 20 22:16
    jayphelps closed #653
  • Aug 20 22:16
    jayphelps closed #652
  • Aug 20 22:15
    julioxavierr commented #655
  • Aug 20 12:45
    greenkeeper[bot] commented #655
  • Aug 20 12:45

    greenkeeper[bot] on eslint-6.2.1

    chore(package): update eslint t… (compare)

  • Aug 18 23:04
    greenkeeper[bot] labeled #655
  • Aug 18 23:04
    greenkeeper[bot] opened #655
  • Aug 18 23:04

    greenkeeper[bot] on eslint-6.2.0

    chore(package): update eslint t… (compare)

  • Aug 18 06:01

    greenkeeper[bot] on webpack-cli-3.3.7

    chore(package): update webpack-… (compare)

  • Aug 14 18:36
    greenkeeper[bot] labeled #654
  • Aug 14 18:36
    greenkeeper[bot] opened #654
  • Aug 14 18:35

    greenkeeper[bot] on rimraf-3.0.0

    chore(package): update rimraf t… (compare)

  • Aug 14 17:29
    greenkeeper[bot] commented #599
  • Aug 14 17:12

    greenkeeper[bot] on rimraf-2.7.1

    chore(package): update rimraf t… (compare)

Kevin Ghadyani
@Sawtaytoes
@Jucian0 sorry I didn't get to you in time. Gitter doesn't notify me on my phone when I have messages
ShiiRochi
@ShiiRochi
Hello everyone. Can I somehow remove epic after adding it? I mean, is there something reverse to epic$.next()?
ShiiRochi
@ShiiRochi

Hello everyone. Can I somehow remove epic after adding it? I mean, is there something reverse to epic$.next()?

Already solved

Dmitriy
@dmitriy.__gitlab
Hey Guys, i wanna enhance my skills in react and any other technologies like redux, mobx, react-native etc. And i looking for internship or junior position. Maybe first time for free. I'll be glad to any suggestions
d4kris
@d4kris
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?
Evert Bouw
@evertbouw
@d4kris the action$ will stop once it gets an error. the catchError operator allows you to return an alternative stream when that happens
you can return the second arg that catchError receives, which is the original observable. This would restart it
d4kris
@d4kris
@evertbouw ok, thanks for clarifying!
Evert Bouw
@evertbouw
you'd generally want to handle the error as close to the source as possible, then you have the most options to correct 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
d4kris
@d4kris
yes, we just want to add an extra layer of "catch alls" that gives a hint where we missed a spot in our error handling
Evert Bouw
@evertbouw
you can wrap the root epic for that
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$;
        }),
    );
d4kris
@d4kris
weird, thats exactly what I was doing but the app went into a spin so I figured I had some infinite loop - trying to migrate to pipes and no more store.dispatch, a bit tricky to see where I messed up when everything has changed :-)
at least I know that wasn't the problem then, thanks!
Evert Bouw
@evertbouw
np
mpx2m
@mpx2m
hi anyone?
I am facing the problem of setting up redux action in getInitialProps of next.js
mpx2m
@mpx2m
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?
Vojtech Jasny
@voy
hi, i have a question
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?
hamfatfat
@hamfatfat
hi, i am facing the same pb. during migration, please advise.
Kevin Ghadyani
@Sawtaytoes
@evertbouw I never thought about composing over the root epic like that. Great idea!
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
Shobhit Gupta
@shobhitg
Hi, I need to test my redux-observable actions and their eventual effect on the redux state. How do I go about it?
Kevin Ghadyani
@Sawtaytoes
Just pass on an 'of' observable with the action @shobhitg.
amir
@amirbr

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

  1. When i see PRODUCT_SELECTED i will dispatch PRODUCTS_FETCHED
  2. I can use delayWhen and to check my product list and if it empty i will wait for PRODUCTS_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:

amir
@amirbr
Hello @jayphelps, I need to open issue in GitHub before?
Ashish Santikari
@ashishsantikari
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.
Ashish Santikari
@ashishsantikari
@Jucian0 redux-thunk is your best friend for this problem. You are trying to dispatch a action creator, not action itself.
Alexander Mattoni
@mattoni
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
casperan
@casperan
are the Online Live Examples not working ?
it just shows a blank page in the view
Umair Asif
@umair.appiskey_gitlab

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;
}

}

Kevin Ghadyani
@Sawtaytoes
@amirbr To know which one is supposed to fire first, you need to show the code that's calling the actions, not where the actions are being called.
@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.
Kevin Ghadyani
@Sawtaytoes
@casperan Please link to the online live examples so someone can verify. Maybe that site is down, or you have an ad-blocker blocking them.
@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.
Kevin Ghadyani
@Sawtaytoes
@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.
Aaron Rice
@adrice727

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.

Kevin Ghadyani
@Sawtaytoes

@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 */)
)),
// ...
Aaron Rice
@adrice727
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 . . .
          })
        );
    })
  );
amir
@amirbr
@Sawtaytoes I don't really understand you, I'm trying inside the epic to manage my actions.
To call action a and then action b not the opposite.
You want me to call those action in the right order inside my component?
Kevin Ghadyani
@Sawtaytoes

@amirbr I misunderstood your question. Your first suggestion is correct:

When i see PRODUCT_SELECTED i will dispatch PRODUCTS_FETCHED

You can dispatch PRODUCT_SELECTED from an Epic after PRODUCTS_FETCHED occurs.