Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Sep 17 08:54
    nixxquality commented #706
  • Sep 17 08:54
    nixxquality commented #706
  • Aug 06 08:54
    mkdudeja commented #706
  • Aug 06 08:52
    mkdudeja commented #706
  • Aug 06 08:52
    mkdudeja commented #706
  • Aug 06 08:52
    mkdudeja commented #706
  • Aug 06 08:50
    mkdudeja commented #706
  • Jul 19 18:24
    rgbkrk commented #477
  • Jul 04 05:34
    paritosh149 commented #738
  • Jul 01 18:32
    jayphelps commented #738
  • Jul 01 18:32
    jayphelps closed #738
  • Jul 01 18:32
    jayphelps commented #738
  • Jul 01 18:31
    jayphelps commented #738
  • Jun 29 10:37
    paritosh149 commented #738
  • Jun 24 22:02
    getkey commented #738
  • Jun 24 21:59
    getkey commented #738
  • Jun 24 20:33
    jayphelps commented #738
  • Jun 24 20:32
    jayphelps commented #738
  • Jun 24 20:31
    wirdehall commented #738
  • Jun 24 20:30
    wirdehall commented #738
Galileo Sanchez
@galileopy
Now the implementation of createApiEnhancers applys a lot of mws, and I am not sure if the problem is there or in my epicMw setup which seems pretty standard
From the top of your head, is there something that might break epicMiddleware? like adding thunks before epics, or having promise actions(which we have for some obscure reason)....
lchan
@leochan007
how to use redux-obs to simulate state machine?
now i use rerender to trigger the state machine transform.
Kevin Ghadyani
@Sawtaytoes
@leochan007 Not sure what you're asking. Could you post some code?

@varun85jobs

@Sawtaytoes Thanks for taking time to read the question. The issue is that when I create the redux store in the child project, the epics are fired however when I move the redux store creation login in the dependency/library, the epics don't get fired. Also this only happens in the e2e cypress tests only. Everything works fine when run in the browser. Hope it clears the things.

Make sure you're including Redux-Observable as a dependency in the library. I can't think what would cause this. Without seeing code or a sample project, it's hard.

Mitchell Cravens
@thetoxicavenger
hi. I'm having trouble implementing a callback after an epic dispatches a success action. If I were using a thunk, it wouldn't be a problem - i would wrap the thunk in a promise then call resetForm() when it resolves. however, since ostensibly redux-observable can't do that, I'm at a loss for what to do. thanks!
// form component
<Form
  handleSubmit={(values, { resetForm }) => {
    const body = JSON.stringify(values);
    dispatch(create(body));

    // form needs to be cleared once response data is saved to the store
    resetForm();
  }
>{children}</Form>
// create epic
export const createUserEpic = action$ =>
  action$.pipe(
    ofType(create.type),
    mergeMap(action =>
      ajax
        .post("https://jsonplaceholder.typicode.com/users", action.payload, {
          "Content-Type": "application/json",
          Accept: "application/json"
        })
        .pipe(map(res => created(res.response))) // want to call resetForm after this has happened
    )
  );
Evert Bouw
@evertbouw
@galileopy are you using rxjs 7 and redux-observable@next?
I suspect a version conflict
@thetoxicavenger this is a bit of a limit in the reactivity model. Your success action could set some state, and you can then trigger an action in your component when that state changes
5 replies
NTN Nhân
@ntnhan0605
What do you create structure folder for redux?
Kevin Ghadyani
@Sawtaytoes
@ntnhan0605 Depends on the project. These days, I typically keep everything Redux in a single folder. I don't mix it with React as it's a separate piece of code entirely.
Dimitri Dumont
@dimitridumont

Hello, I recently discovered redux-observable. While trying to combine multiple Epics I got this error in my test suite with Jest:

TypeError: Cannot read property 'apply' of undefined (redux-observable\lib\cjs\combineEpics.js:26:26)

While in the application I have no worries and all my tests also pass

From what I could see this is from one of my Epics which would be undefined, but I don't understand why:

export const getPostsOfUserEpic: Epic = (action$) =>
    action$.pipe(
        ofType(GET_POSTS_LIST_OF_USER_REQUEST),
        mergeMap((action: any) => {
            const { userID, page, type, actionType } = action.payload

            const params: { page: number; type?: string } = { page }
            if (type) params.type = type

            return from(
                HttpClient.get(`/users/${userID}/posts`, {
                    params,
                })
            ).pipe(
                map(({ data }) =>
                    getPostsOfUserSuccess({
                        actionType,
                        type,
                        data,
                    })
                ),
                catchError((error) =>
                    of(actionFailed(GET_POSTS_LIST_FAIL, error))
                ),
                takeUntil(action$.pipe(ofType(GET_POSTS_LIST_CANCEL)))
            )
        })
    )

My rootEpic imports two combineEpics (postsListEpic and userProfileEpic) which are epics:

const epics: Epic[] = [postsListEpic, userProfileEpic]

export const rootEpic = combineEpics(...epics)
Kevin Ghadyani
@Sawtaytoes
@dimitridumont very strange. Are you using a mock Redux or something?
NTN Nhân
@ntnhan0605

@ntnhan0605 Depends on the project. These days, I typically keep everything Redux in a single folder. I don't mix it with React as it's a separate piece of code entirely.

Thanks

NTN Nhân
@ntnhan0605
Do you know this issue: this.schedulerActionCtor is not a constructor?
Dimitri Dumont
@dimitridumont
@Sawtaytoes i use mock adapter axios to mock axios in my integration tests. But in unit tests, i use my in-memory repository
Kevin Ghadyani
@Sawtaytoes
@dimitridumont I'd check to make sure of a few things. For instance, it's looking for apply of undefined. That makes me think one of the epics doesn't exist. If you look at the source of combineEpics, I'm sure it will say something like Arguments.prototype.apply(). The only reason this happens is if one of your epics doesn't exist or can't be found for the unit tests.
image.png
@dimitridumont Look at this, it calls .apply in two situations, one for RxJS's merge function and another for epic.apply. The latter is more-likely your issue where a passed-in epic isn't a function.
Dimitri Dumont
@dimitridumont

@Sawtaytoes
Hello, thank you for your answers

Indeed, the epic does not seem to be defined or is null. However, I do not see why?

jakubmarcinowski
@jakubmarcinowski

alt

Hi, sadly im getting this error after using
const epicMiddleware = createEpicMiddleware()

Kevin Ghadyani
@Sawtaytoes
@jakubmarcinowski For some reason, I can't click that thumbnail to make it larger. Could you paste the top portion of the error in triple backticks?
@dimitridumont That's a good question. I'm wondering if you're exporting differently with Babel (in the .babelrc) than your local dev env.
Naval Saini
@flipflopapp
Screenshot 2021-06-03 at 3.55.12 PM.png
Facing an error -> this.schedulerActionCtor is not a constructor I need help with this error. I get it from epicMiddleware.run(rootEpic) . Here is the source code - https://github.com/flipflopapp/react-redux-epics-typescript-2021-boilerplate (can anyone help out)
Kevin Ghadyani
@Sawtaytoes
@flipflopapp Is this related to RxJS 7?
Naval Saini
@flipflopapp
@Sawtaytoes yes this is related to RXJS 7 (form package.json - "rxjs": "^7.1.0"). This is easy to reproduce,
  1. clone https://github.com/flipflopapp/react-redux-epics-typescript-2021-boilerplate,
  2. install pacakges (yarn install) and
  3. run app (yarn run start)
(I wonder if I missed a configuration step, and therefore asked here. Since I was doing this on side, not really urgent for me.)
Michael Gauthier
@gauthierm
Is it a reasonable pattern to have action payloads that are not used by reducers but are used in an epic? For sign-in I have an action that has an email/password payload. I don't really want to store the values in the store, just access them in the epic.
There is a reducer that runs on the action, but the reducer doesn't use the email/password values.
Kevin Ghadyani
@Sawtaytoes
@flipflopapp Sadly, I've not used RxJS 7 yet so I wouldn't know, but you're not the first person to note something.
@gauthierm Correct. That's a common pattern. You shouldn't think of actions being only for reducers when using Redux-Observable because actions can now be specifically for triggering events.
dalehurwitz
@dalehurwitz

Hey all,

I'm working on an epic that will asynchronously load another epic. While the epic is loading, all actions will be buffered and eventually passed through this epic.

The current implementation I'm working with:

const lazyEpic =
    (getEpicPromise: () => Promise<Epic>) =>
    (
        action$: ActionsObservableType,
        store: MiddlewareAPI,
        dependencies: BoardEpicDependencies,
    ): ObservableType<Action> => {
        const epic$ = Observable.fromPromise(getEpicPromise());

        // Buffer all actions before epic is loaded
        const actionsBeforeEpic$ = action$.buffer(epic$);

        // Run the buffered actions through the deferred epic
        const bufferedResults$ = actionsBeforeEpic$.mergeMap((actions) =>
            epic$.mergeMap((epic) => epic(ActionsObservable.of(...actions), store, dependencies)),
        );

        // Pass the active action$ stream to the deferred epic
        const normalResults$ = epic$.mergeMap((epic) => epic(action$, store, dependencies));

        return Observable.merge(normalResults$, bufferedResults$);
    };

The problem I'm having is this line, which causes a stack overflow/range error, and I can't quite figure out why:

const bufferedResults$ = actionsBeforeEpic$.mergeMap((actions) =>
            epic$.mergeMap((epic) => epic(ActionsObservable.of(...actions), store, dependencies)),  // Returning epic(ActionsObservable.of(...actions), store, dependencies)) is the culprit
        );

Wondering if there's any suggestions or obvious flaws in this implementation?

Kevin Ghadyani
@Sawtaytoes
@galileopy This looks like an error from RxJS v7. Is that what you're using?
Kevin Ghadyani
@Sawtaytoes

@dalehurwitz This buffering could be handled by dispatching actions and collecting them in another epic. No need to leave the pipeline and make a bunch of variables.

I'm trying to decipher your epic and can't understand what it's doing. There's no reason to ever call epic(action$, .... etc) in another epic. Just dispatch an action (that no reducer uses) and be done with it.

dalehurwitz
@dalehurwitz
@Sawtaytoes essentially epic(action$, store, dependencies); is adding the async-loaded epic to the root
dalehurwitz
@dalehurwitz
I think I see what you're getting at though!
Alessandro Savino
@xavier7179
hello there. I wonder if anyone has experience with redux-observable using electron-forge v6 (webpack + react template). I'm trying to move my application there but I got stuck on a ```Uncaught TypeError: Cannot read property 'Observable' of undefined´´´when I call createEpicMiddleware
Kevin Ghadyani
@Sawtaytoes
@xavier7179 Surprisingly, I have experience with Electron and Redux-Observable, but I'm not sure I have the same use case. Maybe your import is wrong? Here's my library: https://github.com/Sawtaytoes/image-viewer.
Alessandro Savino
@xavier7179
@Sawtaytoes Thanks for sharing! Actually it was a bit of my fault. I had some previous exclusion set due to the rxjs v7 that I wrongly set it up but it is still not compatible either with redux-observable and, apparently, with webpack 5. Since I moved back on v6 for compatibility, once I removed the webpack exclusion, it went back on compiling that part… still issues on other places ;)
Bram Hautekiet
@bram_hautekiet_twitter
Hey, I am trying to send multiple AJAX requests, and only send a SUCCES_ACTION for the last request. We want the requests to be sequential (hence the concatMap), but the SUCCES_ACTION should only be emmited when there are no new actions 'waiting' in the concatmap. So it is important that all the requests are executed, only we are not interested in the results if we know there are still requests that are not executed yet. The attempt so far:
export default (action$, state$, { ajax }) => action$.pipe(
  ofType(MY_ACTION),
  concatMap((action) => {
    return ajax.post(/api/...)
      .pipe(
        switchMap((payload) => {
          return of(SUCCES_ACTION(payload));
        }),
        catchError(() => of(ERROR_ACTION)),
      ));
  }),
);
Kevin Ghadyani
@Sawtaytoes

@bram_hautekiet_twitter That's a tough one. I've solved it a few different ways.

To transmit SUCCES_ACTION at the end of all these data calls, there are a few ways:

  1. Have the thing calling dispatch first send the number of items, then start the MY_ACTION listener and count how many outputs you get. Make sure to account for any errors.
  2. Set a bufferUntil and debounce. This is more complicated, but it's automatic; although, you might still need to mark the source of the data in your action.
  3. There are other ways with publish, but I don't want to get into those unless you really need it. I used this to find out when all downloads were complete when different components were outputting those downloads.
@bram_hautekiet_twitter
Since it's not obvious, here's the solution for the second option:
action$
.pipe(
  ofType('MY_ACTION'),
  bufferUntil(
    action$
    .pipe(
      ofType('MY_ACTION'),
      debounceTime(YOUR_TIMER_VALUE)
    )
  ),
)
Bram Hautekiet
@bram_hautekiet_twitter
@Sawtaytoes Thank you very much for these ideas, a simple counter solves my use case!
>°))))彡
@fisherspy
image.png
update rxjs6 ->7, and redux-observable 1.2.0 -> 2.0.0, how to solve the problem in the screenshot?
image.png
there is no ActionObservable any more, also can't apply pipe to combineLatest
1 reply