Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • 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
  • Jun 24 20:29
    jayphelps commented #738
  • Jun 24 20:29

    jayphelps on gh-pages

    update book update book (compare)

  • Jun 24 20:27

    jayphelps on master

    chore(publish): v2.0.0 chore(scripts/publish.sh): add … Merge branch 'master' of github… (compare)

  • Jun 24 20:25

    jayphelps on v2.0.0

    (compare)

  • Jun 24 20:25

    jayphelps on master

    chore(publish): v2.0.0 (compare)

  • Jun 24 20:20

    jayphelps on master

    chore(package-lock): update loc… (compare)

  • Jun 24 20:20
    jayphelps commented #750
Bo Chen
@bochen2014
from([1,2,3,4]).pipe( filter(v=>v==2), tap( v=>{ // do something}) , swallowit )
how can I swallow it?
i.e. dont' emit anymore , I see ppl write filter (()=> false)
is there a better approach?
Kevin Ghadyani
@Sawtaytoes
@lukeyxu What are you asking in particular? Are you saying you'd like another method other than takeUntil to cancel an ajax observable. switchMap is one that I use often to do that. If a new message comes into a switchMap, it cancels the previous one.
jsjow
@jsjow
Hi, I'm struggling with observables testing
Can anyone here help ?
Kevin Ghadyani
@Sawtaytoes
@jsjow What is the issue? If you paste some code, most people here could help you write a test for that code. Observable testing can be tough, but testing Redux-Observable epics is fairly simple.
jsjow
@jsjow
Hi, can someone help me with this issue : No reducer provided for key ... whenever I run a test using the actual store
3 replies
jsjow
@jsjow

Hi could someone help me with this : I'm getting an error "no reducer provider for key "somekey" ". I tried many different way of importing and exporting, and this only happens when I run the store using Jest and Enzyme. The code : I'm exporting the reducer like so: export default function connections(state = DEFAULT, action = {}) Then I'm importing like so:
import { connections } from '../redux/modules/connections'; Then I'm using combineReducers: import { combineReducers } from 'redux';

const appReducer = combineReducers({
connections,
}); And them I'm creating the store: function rootReducer(state, action) {
let finalState = appReducer(state, action);

return finalState;
}

const storeGenerator = (initialState) => {
const epicMiddleware = createEpicMiddleware();
let middlewares = applyMiddleware(epicMiddleware);

if (blabla...) {
// additional logging middlewares when running the application in development mode
middlewares = applyMiddleware(epicMiddleware, logger);
}

const store = createStore(rootReducer, initialState, composeWithDevTools(middlewares));
epicMiddleware.run(rootEpic);

return store;
}

export default storeGenerator;

Jonas Snellinckx
@Superjo149
Can anyone direct me to some good blog posts or documentation or examples to cleanly handle error handling and show notifications based on this? What is good practice here? Create a separate epic for handling notifications based on actions fired?
Kevin Ghadyani
@Sawtaytoes
@Superjo149 You can create a 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
@Superjo149 The way I've handled errors in the past, if you do get an error, you can dispatch an error action. You can even dispatch different messages for different errors.
4 replies
Kevin Ghadyani
@Sawtaytoes

@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.

jsjow
@jsjow
@Sawtaytoes Hi Kevin, thanks for your reply. I'm aware that this isn't related to Redux-Observables. It's definitely related to a bad import, but I've tried every kind of import, and they simply do not work. I've tried to import the store itself as well, and that returns undefined in Jest tests for some bizarre reason.
Alessandro Savino
@xavier7179
@jsjow may I suggest you to check how to post code in the proper way (= with proper markup)? It will allow for a better support here ;)
jsjow
@jsjow
@xavier7179 Thanks
Kevin Ghadyani
@Sawtaytoes
@jsjow If you're having trouble with Jest, you might need to setup Jest in Babel. Look around and see if you can find out how to get that configured properly. Most-likely, that's the issue you're running into.
Kishu
@SRachamim
Hey. We're new to 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.
Kevin Ghadyani
@Sawtaytoes
@SRachamim What's your structure look like? Statically assigning epics is all I do. If I need to dynamically load something, I use mergeMap to create a new inner observable and takeUntil to kill it based on some action type.
varun85jobs
@varun85jobs
Hello, I am using rxjs, redux-observable in my project. Everything works fine when I run it in browser i.e. epics get called etc. However, when running e2e written in cypress, epics are not fired/called at all. I have posted the question on stackoverflow.
https://stackoverflow.com/questions/67419785/rxjs-epics-not-getting-triggered-in-cypress
Doe anyone have an idea why this must be happening.
Kevin Ghadyani
@Sawtaytoes
@varun85jobs My only guess is your configuration is messed up e2e, or you're having errors because the environment is different somehow.
varun85jobs
@varun85jobs
Hello @Sawtaytoes , what is confusing me is that e2e tests run fine when the store creation is moved within child project from the dependency project. It is only when store creation is within the dependency prject that's when the issue occurs. So, I am not sure what might be going wrong.
Kevin Ghadyani
@Sawtaytoes

@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.

varun85jobs
@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.
Galileo Sanchez
@galileopy
image.png

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.

image.png

that error

my root epic is just this
const log = (action$, state$) => action$.pipe(tap(log), ignoreElements());
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
Galileo Sanchez
@galileopy
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?