catchError wrapper, but without explicit dispatch, it might not work the way you expect in every use case. I have an article about explicit dispatch here: https://itnext.io/the-best-practice-anti-pattern-5e8bd873aadf
4 replies
@jsjow First, your issue is not with Redux-Observable.
It's most-likely a bad reducer import. Something like reducer instead of { reducer }.
Lastly, you when posting code samples, you should use triple backticks to ensure the code is readable.
What you pasted was a bunch of plaintext with no tabbing or syntax highlighting; meaning, it was more difficult to parse. I've seen many people here help others when they paste code in a way that's easily readable.
redux-observable and we started integrating it into our existing code-base. Out goal: decouple state and logic from the UI layer by lifting the state and put it on redux. We have one big concern though: performance. What is the best way to complete and add epics on run time? We know how to technically do that ('Adding New Epics Asynchronously/Lazily" section on the website explain it nicely), but we want to know if there is some known pattern to manage it cleanly.
https://stackoverflow.com/questions/67419785/rxjs-epics-not-getting-triggered-in-cypress
Doe anyone have an idea why this must be happening.
@varun85jobs I'm not quite sure what your issue is. I've read it multiple times, and I don't have a good grasp of the situation.
It seems weird that running unit tests would break Redux-Observable unless you're trying to execute before the Redux-Observable middleware has finished starting up.
Hi guys, I am having a pretty frustrating error trying to add redux-observables to an existing codebase, they're using redux toolkits with custom store enhancers.
export const configureStore = () => {
const epicMiddleware = createEpicMiddleware();
const store = configureStoreToolkit({
reducer,
enhancers: [
createApiEnhancer({
baseUrl: API_ROOT,
tokenRefreshUrl: `${API_ROOT}${ApiPath.RefreshToken}`,
maxQueueSize: 20,
defaultFetchOptions: {
headers: {
'Content-Type': 'application/json',
},
},
}),
],
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware().concat(epicMiddleware),
});
epicMiddleware.run(rootEpic);
return store;
};I tried that, and
export const configureStore = () => {
const epicMiddleware = createEpicMiddleware();
const store = configureStoreToolkit({
reducer,
enhancers: [
applyMiddleware(epicMiddleware),
createApiEnhancer({
baseUrl: API_ROOT,
tokenRefreshUrl: `${API_ROOT}${ApiPath.RefreshToken}`,
maxQueueSize: 20,
defaultFetchOptions: {
headers: {
'Content-Type': 'application/json',
},
},
}),
],
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware().concat(epicMiddleware),
});
epicMiddleware.run(rootEpic);
return store;
};But I keep getting this error.
that error
const log = (action$, state$) => action$.pipe(tap(log), ignoreElements());
@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)
