@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.
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
)
);
5 replies
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)
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.
.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.
.babelrc) than your local dev env.
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)
- clone https://github.com/flipflopapp/react-redux-epics-typescript-2021-boilerplate,
- install pacakges (yarn install) and
- run app (yarn run start)
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?
@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.
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)),
));
}),
);@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:
- Have the thing calling
dispatchfirst send the number of items, then start theMY_ACTIONlistener and count how many outputs you get. Make sure to account for any errors. - Set a
bufferUntilanddebounce. This is more complicated, but it's automatic; although, you might still need to mark the source of the data in your action. - 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.
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)
)
),
)
1 reply
@fisherspy Not being able to apply pipe to combineLatest sounds like an RxJS bug.
I think I remember Jay saying something about v2 not having ActionObservable anymore. But it looks like you're using it for TypeScript types right?
I don't use TypeScript, so I'm not sure nor have I moved to RxJS v7; although, there are definitely others here who have.