Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Dec 24 2020 21:17
    nikasepiskveradze commented #706
  • Dec 24 2020 21:16
    nikasepiskveradze commented #706
  • Dec 20 2020 07:01
    gregbown commented #739
  • Dec 19 2020 23:18
    jayphelps commented #739
  • Dec 19 2020 22:11
    gregbown edited #739
  • Dec 19 2020 22:05
    gregbown closed #739
  • Dec 19 2020 22:05
    gregbown edited #739
  • Dec 19 2020 22:03
    gregbown opened #739
  • Dec 17 2020 14:38
    evertbouw commented #706
  • Dec 17 2020 14:11
    evertbouw commented #706
  • Dec 17 2020 13:13
    asherccohen commented #706
  • Dec 16 2020 10:31
    jun-sheaf closed #734
  • Dec 16 2020 01:36
    jayphelps commented #734
  • Dec 16 2020 01:30
    jun-sheaf commented #734
  • Nov 16 2020 12:56
    MaximeBernard opened #738
  • Nov 09 2020 06:40
    adeptb commented #737
  • Nov 09 2020 06:40
    adeptb closed #737
  • Nov 06 2020 21:17
    hitmands closed #502
  • Nov 05 2020 15:58
    evertbouw commented #737
  • Nov 05 2020 13:31
    adeptb opened #737
Julian Geppert
@Spacetoaster
Hi, jsbin live examples seem to be broken in the docs. Not sure if this has been reported already, just thought i'd post it here
Kevin Ghadyani
@Sawtaytoes
@xavier7179 What's "a third one"?
xavier7179
@xavier7179
@Sawtaytoes I cannot add a third epic (like in the above schema) to the two epics code example.
Kevin Ghadyani
@Sawtaytoes

@xavier7179 Is there any reason you can't move this code to another epic?

action$.ofType(FETCH_EPIC2).pipe(
   take(1),
   map(() => fetchEPIC2(original_action.payload))

I know you need original_action.payload. When your action completes, can you add originalActionPayload: original_action.payload to the action?

xavier7179
@xavier7179

@xavier7179 Is there any reason you can't move this code to another epic?

Sorry, I'm not sure I got the question...

I know you need original_action.payload. When your action completes, can you add originalActionPayload: original_action.payload to the action?

I can certainly add it. Is it the issue I'm facing figuring out how to chain several epics in sequence, avoiding parallelism?

Kevin Ghadyani
@Sawtaytoes
@xavier7179 Correct. You're wanting orchestration where you want one action to occur which affects another. You could simply just make a huge epic. You don't have to dispatch actions.
@xavier7179 You only need to dispatch actions when certain things happen like if other parts of your app need to know what's happening.
xavier7179
@xavier7179
But what I do not get is: I need actions to start epics, and if I want to keep each single epic apart in order to avoid duplicating the code when I need them alone, how can I implement the "once one epic end without error, start the next one" protocol?
Evert Bouw
@evertbouw
I'm not sure if nesting is the right approach. what about putting all the epics at the top level? Start the second epic with the success action of the first. Have a separate epic to further process the errors or combine the logic into a custom operator
xavier7179
@xavier7179

I'm not sure if nesting is the right approach. what about putting all the epics at the top level? Start the second epic with the success action of the first. Have a separate epic to further process the errors or combine the logic into a custom operator

But this way I cannot call epics alone... am I right?

xavier7179
@xavier7179
For the application I'm working on, having them separate (to call alone) and find out a way to concatenate them makes totally sense... this is why I'm trying to improve the two epcs code in order to have no more boundaries.
Evert Bouw
@evertbouw
you could have the epic listen for two actions, the result action of the previous or its own start
Ahmad R
@harvester-klirk
hey guys i need help setting up "redux-persist " in a react js
Ahmad R
@harvester-klirk
i'm trying to setup redux-persist here's my code , all the tutorials on the redux-persist have a different setup approach
`const createStoreWithMiddleware = applyMiddleware('
  `promiseMiddleware,`
  `ReduxThunk`
`)(createStore);`

 `ReactDOM.render(`
  `<Provider`
   ` store={createStoreWithMiddleware(`
     ` Reducer,`
    `  window.__REDUX_DEVTOOLS_EXTENSION__ &&`
    `  window.__REDUX_DEVTOOLS_EXTENSION__()`
     `  )}`
   ` >`
     ` <BrowserRouter>`
      ` <App />`
    ` </BrowserRouter>`
   `</Provider>,` 
xavier7179
@xavier7179

@evertbouw @Sawtaytoes I actualy solved 90% of the issue with the following two epics:

export function fetchAllEpics(action$) {
    return action$.pipe(
        ofType(FETCH_ALL_EPICS),
        take(1),
        mergeMap((original_action) =>
            concat(
                of(fetchFirstEpicAction(original_action.payload)),
                action$.ofType(EPIC1_FETCHED).pipe(
                    take(1),
                    mergeMap(() =>
                        concat(
                            of(fetchSecondEpicAction(original_action.payload)),
                            action$.ofType(EPIC2_FETCHED).pipe(
                                take(1),
                                map(() => fetchThirdEpicAction(original_action.payload))
                                )
                            ),
                        )
                    )
                )
            )
    );
}

export function collectEpicResults(action$) {
    return action$.pipe(
        ofType(FETCH_ALL_EPICS),
        mergeMap((action) =>
                combineLatest([
                    action$.ofType(EPCI1_FETCHED),
                    action$.ofType(EPIC2_FETCHED),
                    action$.ofType(EPIC3_FETCHED)
                ]).pipe(
                    map(([e1, e2, e3]) =>
                        fetchAllEpicsFullfilled({ e1: e1.payload, e2: e2.payload, e3: e3.payload })
                    ),
                    catchError(([error_e1, error_e2, error_e3]) => of(fetchAllEpicsFailed([error_e1, error_e2, error_e3])))
                )
            )
    );
}

where the composition can be done by replacing the map with a mergeMap + concat block. Everything works fine in the serialization, while the second epic is perfect when everything works without errors. When in the chain some epic fails (notice that each EPIC has its own piping of map and catchError) then, the first epic is stuck. I figure out that maybe the issue is not having two epics but putting all in one epic but... I did not work out how, in order to keep the correct path still fully working.

André Vitor de Lima Matos
@andrevmatos
Did anyone here experience redux-observable getting slow at processing actions on some conditions? I noticed registering to some events on an EventEmitter 3rd-party lib did slow the overall state machine a lot. I'm not sure what's causing it, if it's something with schedulers. Profiling the app has shown CPU not going up, but the actions still get increasingly slow to go through certain epics
Kevin Ghadyani
@Sawtaytoes

@andrevmatos That might be something in your code. I've run really complex Redux-Observable applications and performance tests. It's more-likely something where your pipelines are spawning more observables and not getting rid of past ones. Or that the pipelines are computationally intensive.

Is it possible to post any of that code?

André Vitor de Lima Matos
@andrevmatos
@Sawtaytoes the weird behavior was seen on https://github.com/raiden-network/light-client on some specific high-load scenarios. I couldn't find a small reproducible example, pretty sure it wasn't on redux-observable side and instead some slowness on the 3rd-party eventemitter lib (matrix-js-sdk). Anyway, replacing some concatMap with mergeMap + waiting observable, and replacing some from with scheduled + asapScheduler on some epics which could dispatch intensive side-effects actions did seem to have fixed or worked around the issue, at least preventing other epics from starving. raiden-network/light-client#2281
Kevin Ghadyani
@Sawtaytoes

@andrevmatos Awesome! Glad you were able to fix it! And yes, you are right, using concatMap is running things sequentially rather than async. Same issue people run into using async-await.

Redux-Observable has its own scheduler to allow things to speed up, but I'm assuming you needed something even more than that in your scenario. Personally, I'm curious.

Similar to you, I also wrote my own controller for my LIFX lights all in Redux-Observable :).

Zach Gavin
@zgavin1
Hey just a heads up for yall, there's a dynamic URL here: https://github.com/redux-observable/redux-observable/blob/16f083d405ace2039da0836c4a404a85d8052991/src/createEpicMiddleware.ts#L49 that does not work anymore
Kevin Ghadyani
@Sawtaytoes
@zgavin1 Where is this linked?
Evert Bouw
@evertbouw
that will appear in your browser console
Jesus The Hun
@JesusTheHun
how are you guys handling side effects such as form control ? closing the form modal on sucess, or redirecting on success. Do you create an epic for each form or do you decorate your action payload to add some callbacks ? I feel like callbacks are anti-pattern but it also feel a lot more lightweight
Kevin Ghadyani
@Sawtaytoes

@JesusTheHun I don't pass callbacks like that anywhere in Redux-Observable , but sometimes I will pass classes with methods if necessary like a flicClient or eventEmitter depending.

While it's possible to pass React callbacks to Redux-Observable, that's really strange and wouldn't work if you put your Redux store in a Web Worker or a child process.

The way of doing it is creating a generic epic or epics that work with any form. Add some form of id and now you can identify form to close regardless of which epic you're in.

Your Modal component, or whatever you're using to display the form would get hidden because it's listening to the open state of that particular ID.

Does this make sense? If you have code, paste some in, we can help you come up with a plan.

Jesus The Hun
@JesusTheHun

Hi @Sawtaytoes it does make sense, we actually have though about that option and then thought it was a bit overkill. Your worker argument is very good.

The way of doing it is creating a generic epic or epics that work with any form. Add some form of id and now you can identify form to close regardless of which epic you're in.

Why/How a generic epic ? In your business epic you dispatch your success action and in your generic epic you catch all those success/failure and your react to them ?

xieshuhong
@xieshuhong
image.png
here it’s a interview question that I ran into , the request for me , is to write code inside the return function, and based on the following info , to print out 1, 2, 3 on the console
can anyone help me with this
Sahar Rachamim (Kishu)
@saharrachamimfg
Hey! Do you have good resources for learning how to structure our reducers and epics in a manageable way for a large-s application?
Maxime Bernard
@MaximeBernard
Hi! I asked some questions about redux-observable's roadmap yesterday (redux-observable/redux-observable#738). Maybe some of you here have answers?
Eleonora Lester
@elstr
hi! is there a way to execute async await using switchMap ?
I need to first execute a fetch, wait for the result, dispatch some actions and then continue with some other stuff
but can't manage to make it work
Jesus The Hun
@JesusTheHun
@elstr show me what you got I'll help you do that
Kevin Ghadyani
@Sawtaytoes
@saharrachamimfg No clue. I wrote an article about how you could use it, but each app is different. Just know you can and should dispatch actions from epics that trigger other epics.
@xieshuhong can you paste the code and the issue you can't solve?
@JesusTheHun Correct. I catch those and dispatch different actions based on success or failure.
mwalkerr
@mwalkerr
The JSbin link on https://redux-observable.js.org/docs/basics/Epics.html isn't working because JSbin is asking for a pro account to embed from https
Kevin Ghadyani
@Sawtaytoes
I wonder if all of them are like this. @jayphelps Looks like the site might need to use another paste-bin service or a license needs to be paid.
PogoniiA
@PogoniiA
Hey guys
Is there a way in epic to subscribe for continuos data fetching
to listen changes in firebase ?
Pervez Alam
@pervezalam777
@PogoniiA : Yes, I think so, if you can open a request which keep on sending data then it can be done. Server sent event is the way to handle this please go through https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events Also I have create on sample for the same https://github.com/pervezalam777/server-sent-event (NOTE: Redux-Observable not used in this example)
PogoniiA
@PogoniiA
@pervezalam777 thanks. I found a good example on stackoverflow which covers my whole idea.
So if someone is interested :
https://stackoverflow.com/questions/40983206/how-to-eventsource-with-redux-observable
Kevin Ghadyani
@Sawtaytoes

@PogoniiA The answer in that StackOverflow link is correct.

Because Firebase doesn't have a native RxJS implementation, you need to take their streaming function, wrap it in an RxJS observable, and pipe off that in Redux-Observable.

From there, it just dispatches actions and the rest of your code works as you'd expect.

amir
@amirbr

Hello guys,
I'm trying to test my Epic, I'm quite new with TestScheduler and Marble Diagrams.

I hope someone can help.

this is my Epic:

const deleteMediaEpic: Epic = (actions$, state$: StateObservable, { api }: EpicDependencies) =>
  actions$.pipe(
    ofType(DELETE_MEDIA),
    switchMap((action: DeleteMediaAction) => api.deleteMedia(action.payload.operationCode, action.payload.productKey, action.payload.mediaToDelete).pipe(
      switchMap(() => {
        const actionsToDispatch = []
        actionsToDispatch.push(productSelected(action.payload.productKey, action.payload.operationCode))
        actionsToDispatch.push(clearMediaSelected([]))
        return of(...actionsToDispatch)
      }),
      catchError(mediaFetchError => of(`Error in deleteMediasEpic: ${mediaFetchError}`))
    ))
  )

and this is my test:

it('Delete select Media', () => {
  testScheduler.run(({ hot, cold, expectObservable }) => {
    const action$ = hot('-a', {
      a: { type: 'DELETE_MEDIA', payload: { productKey: 'PRODUCT_KEY1', operationCode: 'VPV_H_SHANAOR1', mediaToDelete: [0] } }
    })

    const state$ = {}

    const dependencies = {
      getJSON: url => cold('--a', {
        a: { url }
      })
    }

    const output$ = deleteMediaEpic(action$, state$, dependencies)

    expectObservable(output$).toBe('---bc', {
      b: {
        type: 'PRODUCT_SELECTED',
        payload: { productKey: 'PRODUCT_KEY1', saleCode: 'VPV_H_SHANAOR1', filtersType: undefined }
      },
      c: {
        type: 'CLEAR_MEDIA_SELECTED',
        payload: {
          defaultValue: []
        }
      }
    })
  })
})

for me of is a sequence operator and c should be immediately after b.

Hope you can understand something from the code me.

and this is the result of the test:

  expect(received).toEqual(expected) // deep equality

  - Expected
  + Received

  @@ -1,8 +1,8 @@
   Array [
    Object {
  -   "frame": 3,
  +   "frame": 6,
     "notification": Notification {
      "error": undefined,
      "hasValue": true,
      "kind": "N",
      "value": Object {
  @@ -14,11 +14,11 @@
       "type": "PRODUCT_SELECTED",
      },
     },
    },
    Object {
  -   "frame": 4,
  +   "frame": 6,
     "notification": Notification {
      "error": undefined,
      "hasValue": true,
      "kind": "N",
      "value": Object {

     5 | 
     6 | const testScheduler = new TestScheduler(
  > 7 |  (actual, expected) => { expect(actual).toEqual(expected) }
      |                      ^
     8 | )
amir
@amirbr
I found it, I need to group my action like this ------(ab) because I use of or from
Kevin Ghadyani
@Sawtaytoes
@amirbr Glad you figured it out. I meant to respond yesterday and got caught up in other things.
amir
@amirbr
Thank you @Sawtaytoes