by

Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • May 23 12:09
    greenkeeper[bot] commented #727
  • May 23 12:09

    greenkeeper[bot] on mocha-7.2.0

    chore(package): update mocha to… chore(package): update lockfile… (compare)

  • May 21 20:57
    greenkeeper[bot] commented #722
  • May 21 20:57

    greenkeeper[bot] on @types

    chore(package): update @types/s… chore(package): update lockfile… (compare)

  • May 21 20:48
    greenkeeper[bot] commented #723
  • May 21 20:48

    greenkeeper[bot] on @types

    chore(package): update @types/n… chore(package): update lockfile… (compare)

  • May 21 18:11
    greenkeeper[bot] labeled #731
  • May 21 18:11
    greenkeeper[bot] opened #731
  • May 21 18:11

    greenkeeper[bot] on @typescript-eslint

    chore(package): update @typescr… chore(package): update lockfile… (compare)

  • May 21 17:58
    greenkeeper[bot] labeled #730
  • May 21 17:58
    greenkeeper[bot] opened #730
  • May 21 17:58

    greenkeeper[bot] on @typescript-eslint

    chore(package): update @typescr… chore(package): update lockfile… (compare)

  • May 20 00:01
    greenkeeper[bot] commented #723
  • May 20 00:01

    greenkeeper[bot] on @types

    chore(package): update @types/n… chore(package): update lockfile… (compare)

  • May 19 19:26
    greenkeeper[bot] commented #722
  • May 19 19:26

    greenkeeper[bot] on @types

    chore(package): update @types/s… chore(package): update lockfile… (compare)

  • May 19 18:45
    greenkeeper[bot] commented #723
  • May 19 18:45

    greenkeeper[bot] on @types

    chore(package): update @types/n… chore(package): update lockfile… (compare)

  • May 19 14:07
    OliverJAsh commented #562
  • May 19 14:07
    OliverJAsh commented #562
Shobhit Gupta
@shobhitg
Hello, This is the first time I am learning react hooks. I am a big fan of redux-observables and wondering if react hooks are interoperable with redux-observables.
If yes, can someone please share any repo that has successfully used both together. hopefully a typescript based react project
Also please share if there are any best practices (or blog articles) on using react hooks and redux-observable together.
Kevin Ghadyani
@Sawtaytoes
There are ways to get them to play well together. I have a lot of ideas myself. It depends on what you're after. Are you wanting RxJS, or are you wanting to mimic the behavior with useEffect?
Shobhit Gupta
@shobhitg
I am interested to use redux-observable effects. Most important thing for me is to have an architecture where the side-effect of fetching from an API should happen on dispatching an action. This is just usual redux-observable architecture. But what I am not sure of, does useEffect of hooks interfere with any of the regular redux-observables? Have there been any open source project known to use useEffect as well as redux-observable effects together?
Kevin Ghadyani
@Sawtaytoes
@shobhitg There's no problem with useEffect and Redux-Observable as far as I know.
As long as you're using useDispatch and useSelect, then you're fine.
jpangam
@jpangam
any example with react hooks?
Kevin Ghadyani
@Sawtaytoes
Examples of using Redux with React Hooks?
If you don't know, Redux-Observable is a completely separate system to React. What happens is it creates a middleware that it passes to Redux and that gives it a connection point. Anytime a Redux action fires or the state updates, then Redux-Observable can do something. It has no association with React, only with Redux. Through React-Redux, which you're probably already using, you can trigger Redux-Observable epics by dispatching Redux actions just like you would in class components.
jpangam
@jpangam
example of how to use redux-observable with redux-hooks like useSelector and useDispatch? I am new to redux-observable
any pointer to sample github project (react-native) will be very helpful
Kevin Ghadyani
@Sawtaytoes

@jpangam https://redux.js.org/recipes/usage-with-typescript#usage-with-react-redux

This is all in the React-Redux documentation. As long as you can hook into Redux from React, Redux-Observable will work.

Noitidart
@Noitidart
from my epic, if i dont want it to complete/error and i dont want to send an action to the store what can i do?
doing const actionEpic = action$ => action$.map(action => action) seems to be infinite loop. i was hoping because it saw the referentially same action as it started with, that it will not send it back to the reducers. because the action that triggered this epic, came after it hit the reducers.
gvincenta
@gvincenta
hi everyone
gvincenta
@gvincenta
im new into here
any suggestion on where to start
never used redux before..
but ive used react
Kevin Ghadyani
@Sawtaytoes
@Noitidart You need ignoreElements if you want it to not auto-dispatch an action.
Noitidart
@Noitidart
But wont that complete the pipeline? causing unsubscribe/
Kevin Ghadyani
@Sawtaytoes

@gvincenta You would need to first learn and understand Redux before using Redux-Observable if you care about state.

If you only care about side-effects, you'd still need to learn Redux, but only the part about dispatching actions and literally nothing else.

@gvincenta Are you wanting to use Redux standalone or with React? If with React, you'd need to learn both Redux and React-Redux. The latter being a library which creates a convenient way to hook up your Redux store to React.
lknight24
@lknight24

Working through understanding the intentions of redux-observable. If "The pattern of handling side effects this way is similar to the "process manager" pattern" and the epics are triggered after a state change ("Actions always run through your reducers before your Epics even receive them."). What is the suggested approach to handling a rollback? Have the reducer not handle the action but rather only allow the epic to dispatch the actions necessary thereby giving it knowledge about previous state?

Also is there a way to batch emit actions so as to limit renders? <- Can disregard, this question. I found the right way to ask google and found some helpful discussions.

Kevin Ghadyani
@Sawtaytoes

@lknight24 Depends. Why would you need to rollback if you already made a state change?

I've seen staged changes vs committing changes like Git. So you put your changes into a different area of state and then clear it out if you need to rollback.

Another idea is to call a "FETCH_X" action. Then nothing would be written to state if the AJAX call fails. No rollback necessary.

@lknight24 A key here is knowing that a lot of what your epics do isn't just side-effects, but also dispatching actions.
@lknight24 So you're dispatching an action that only triggers an epic. That epic then dispatches an action which a reducer understands and then writes to state.

@lknight24 About batching, I understand you found solutions, but there's also mergeMap with a second arg. That will create a fixed number of pipelines, and you can restrict dispatching more actions until those pipelines free up.

I use this for uploads where instead of uploading 20 items at once, I upload 2 at a time. Not in pairs. Just saying "there are two pipelines for uploads". If 1 upload finishes, another will start in that next-open pipeline. So at most 2 will go, but they don't have to start and finish at the same time.

lknight24
@lknight24

@Sawtaytoes Thank you for taking the time to respond. The reasons for the rollback are not really known yet, just theoretical at the moment. I like the idea of the pattern you suggested with staged commits. I had not considered that.

I can see the reducer pass through and landed on that as the probable solution, or at least the only one that I could think of. It seemed to be contrary to the design intentions since the docs state emphatically that the action is sent to the reducer first, so I thought perhaps I was missing something.

If I understand you correctly and the operation of mergeMap it would send the resulting payload as a series of actions to the reducers. Is that correct? I don't have a scenario in mind, rather this is for me to gain understanding. But let's say you have 4 actions that make sense to dispatch at the same time for what ever reason. I have not yet tried it, but was looking for someway to basically use this. https://react-redux.js.org/7.1/api/batch#batch My understanding is that you should be able to wrap batch(() => {...}) in an observable and it should accomplish the desired effect.

I still need to digest this discussion more and play with it: redux-observable/redux-observable#556

Along with this SO: https://stackoverflow.com/questions/47166999/can-we-use-redux-batch-middleware-with-redux-observable

That's where I got that notion.

Kevin Ghadyani
@Sawtaytoes

@lknight24 I see where you're coming from. Actions do go to reducers first, you just don't have to have a reducer listening for that action.

But you don't need to batch actions with Redux-Observable most-likely. This is related to the Thunk model; at least, that's what it looks like.

const batchActionsEpic = (
    action$
) => (
    zip(
        action$
        .pipe(
            ofType(ACTION_1),
        ),
        action$
        .pipe(
            ofType(ACTION_2),
        ),
        action$
        .pipe(
            ofType(ACTION_3),
        ),
        action$
        .pipe(
            ofType(ACTION_4),
        ),
    )
    .pipe(
        take(1),
        // do whatever you want
    )
)
@lknight24 I'm not familiar with the batch middleware sadly. Trying to assume what you want based on the information given.

Redux-Observable epics do not return anything except an observable.

But calling an action is completely separate. There's no promise you get back like with Redux-Thunk. You have to write the logic to handle "I'm done processing" yourself.

I have an article about how to do this and another article about a better way of doing it that's non-standard but looks to be a better way.

Muthukumar Selvarasu
@muthukumarse

Guys, encounter problem with redux-observales
Authorization: Bearer xxxxx
converted to
Authorization: bearer xxxx

anyone faced this issue and what is the resolution

Kevin Ghadyani
@Sawtaytoes

@muthukumarse
Depends. What's the code? Are you using ajax? How are you passing in the data? If not the ajax observable, are you using fetch? Are you sure the data is coming in and going out correctly?

This is why showing the code example is good because this doesn't sound like a Redux-Observable issue.

Muthukumar Selvarasu
@muthukumarse
@Sawtaytoes Thank you. Found that after debugging its not happing over observable. Its due to user defined module which is Ajax wrapper/
Kevin Ghadyani
@Sawtaytoes
:thumbsup:
Kamil
@kamilnosek

Hello,
I've got a question regarding epics.

const addItem$: Epic = (action$: Observable<Actions>, state$: Observable<RootState>) =>
  action$.pipe(
    filter(isActionOf(ItemsAction.upload)),
    withLatestFrom(), // get an additional selector like this.state.select(selector)
    switchMap((form) =>
      api.addItem(form.payload).pipe(
        map(success => ItemsAction.uploadSuccess(success)),
      ),
    ),
  );

How can i get a selector in withLatestFrom? :) In ngrx i knew how to do that, but unfortunately there, i do not know :/ Thank you for help!

Kevin Ghadyani
@Sawtaytoes

@kamilnosek It's troublesome to do depending on what you want.

You can do map(() => selector(state$.value)). If you want to create a custom operator, you still need to pass it state$ and the selector function.

There are ways around it, but it would require your operator be aware of state$. If you can solve this, that would be a huge boon to Redux-Observable development.

@kamilnosek Actually, Redux-Observable has access to state$ so technically, a withState operator is only a PR away :p.
@kamilnosek There's another way around this too. If Redux-Observable has a createOperators function or some way to get state$ in middleware, that's another option.
Kamil
@kamilnosek

@Sawtaytoes All i want to achieve is to create selector like

import { createSelector } from 'reselect';

export const getItem = createSelector(getSomeState, state => state.item)

And use this getItem selector in epics :D

Kevin Ghadyani
@Sawtaytoes
@kamilnosek It's not as simple as that, but you can figure it out I'm sure. The current state is in state$.value.
kamlesh tajpuri
@ktajpuri
hey Nice people I am stuck in a situation .. this is the code I have
const socketConnectEpic = (action$, state$, { io, sock$ }) =>
  action$.pipe(
    ofType(connectSocket.getType()),
    pluck('payload'),
    map(({ url, config }) => io(url, config)),
    switchMap(sock =>
      merge(
        fromEvent(sock, 'connect').pipe(
          tap(() => sock.emit('change_role', { role: 'teacher' })),
          tap(() => sock.emit('additional_resources', { groupSessionId: state$.value.toJS().tutoring.sessionDetails.id }, (err, data) =>
            console.log('additional_resources', data), // I want to trigger a redux action with data here. How do I do that?
          )),
          tap(() => sock.emit('join_room', {
            groupSessionType: 'tutoring_session',
            groupSessionId: state$.value.toJS().tutoring.sessionDetails.id,
            status: 'available',
          })),
          mapTo(sock)),
        fromEvent(sock, 'disconnect').pipe(mapTo(null)),
      ).pipe(
        startWith(null),
        finalize(() => sock.close())),
    ),
    tap(sock$),
    ignoreElements(),
  );
at he line console.log('additional_resources', data), I want to trigger a redux action, how can I do that? I am very rew to rxjs so cant figure it out.
Kevin Ghadyani
@Sawtaytoes

@ktajpuri

Unless you explicitly allow dispatch (https://itnext.io/the-best-practice-anti-pattern-5e8bd873aadf), the only way to dispatch an action is to let the action fall through the pipeline. If you want to dispatch mid-pipeline, then you need to split the pipeline at that point, let one action through, and have the other pipeline continue what you were doing.

This requires a mergeMap, concatMap, or switchMap operator (choose one depending on the behavior you want). Then you need to return a merge observable inside:

merge(
  of(action), // Fire an action.
  of(data).pipe(
    // Continue the pipeline.
  ),
)
Kevin Ghadyani
@Sawtaytoes
@ktajpuri Did you find a suitable solution?
Jonas Snellinckx
@Superjo149
Can someone point me to some advanced examples? I am trying to rewrite my music app to redux-observable. I'm currently working on the play logic, but it involves a lot of fetching logic. I'm not sure what the best practises are for doing specific things like waiting for state, while keeping my code clean.
@Superjo149 I wrote that article. So if you need any help, feel free to ask away!