

In the following examples, Most.js will be used. RxJS is the more popular of the two, but Redux-Observable can also be used with Most.js, which is both smaller and faster. RxJS and Most.js are two libraries for reactive programming with which you can handle streams of actions in different ways. Complex scenarios such as other actions having an impact on how a pending network request should be handled, can be solved quite easily with Redux-Observable. Redux-Observable is a middleware for Redux which handles cancellation and many other asynchronous side effects by using reactive programming.
#Redux observable code
Async code and side effects with Redux-Observable We can in this case immediately cancel when the event z occurs even though all the data haven’t been received. Think about the previous described problem where a user navigates to a page, but the user changes her mind and navigates back. We want to continue requesting the data until we have received all chunks of data ( a- g). Let’s say that we are requesting some data, with every request represented by the balls on the timeline. Observables example (Illustration from the RxJS docs) These events are represented by the balls. The lines represent the timeline of a stream on which a number of events can occur. This could easiest be described by the illustration below. Two important terms when it comes to reactive programming are observables and streams. We will start with a short introduction to reactive programming. If you have heard of reactive programming before but never understood its place, this will be your aha moment. The solution to this can be found within the world of reactive programming. So the question then remains, how can we solve a problem like that? Then you still have to handle the response when it eventually arrives even though that component for example may have been unmounted. Say for example that the user navigates to a page, which requests some data, but then the user changes her mind and navigates back. Similarly, you would like to cancel a promise triggered by an action that the user regrets.

When he has received an order, he has to complete it and make the entire sandwich. But the problem is that the chef can’t just stop preparing your order.

You are walking in and order a sandwich but after you have ordered it you regret your decision and would like to cancel the order. Let’s look again at the example above where we make a visit to a sandwich shop. You can for example not change your mind and cancel things that already have been triggered because promises can’t be cancelled.īut why would you want to cancel a promise? But for more complex scenarios where we need to have more control, some problems still remain. But I believe the redux observable is wanting an const socket$ = Observable.webSocket(Ĭonst bankStreamEpic = (action$, store) =>Īction$.ofType(START_BANK_STREAM).Thunk allows us to be in control of when and if an action should be dispatched, and works well for many use cases. The sample I see are using a multiplex and not actually calling a subscribe on websocket, and I'm confused a bit on changing it up.
#Redux observable how to
Trying to figure out how to get my epic going which will subscribe to a websocket and then dispatch some actions as the emitted events roll in from the websocket.
