Let's begin by creating a very simple epic and marble test to confirm our setup is working. With this in mind, we can start building our first epic. The idea is to create marble diagrams to describe the inputs and the expected outputs of our epics, then use our chosen test framework to assert the result. For a complete description of marble syntax, see the RxJS documentation. The symbols a and b are the elements emitted by the observable and | indicates the observable completing successfully. Time flows from left to right in the diagram, with each - symbol representing 10 "frames" of time. Introduced in RxJS 5, marble tests allow you to represent elements emitted by an Observable over time using a diagram. For the test framework I'll be using Jest, but it should be easy to adapt the examples for any framework. This shouldn't make a difference to most of the code, but some of the import locations might be different if you're using a different version.
Finally I'll give some less detailed examples of further improvements.Īll examples were built using RxJS 5.5. I'll begin with a brief introduction to marble testing, then build up an epic of increasing complexity over several examples, along with tests. I'll assume you're already familiar with Redux, RxJS and redux-observable. In this post I'll explain some of the tools you'll need to test RxJS, specifically within the context of redux-observable. It can be a bit tricky to test, however, especially if you're using time-based operations. Based on RxJS, it allows you to represent your actions and their effects as streams of events over time. Redux-observable is a great way for modeling asynchronous effects in Redux.
This might sound complicated or vague but it’s really easy so let's do it step-by-step.Posted by Hentie Louw on December 3rd, 2017. use resolveActions on your “pages” components where you will just need to provide which actions need to be loaded on a particular page component.use withObservable on pages/_app.js where you will provide your rootEpic.In other words, you will need to provide your rootEpic through the HOC withObservable which then will push the actions needed into that stream ( rootEpic ). Then you need to integrate next-redux-observable which will “connect” your epics with your application. The first one is next-redux-wrapper that will connect your NextJS application with a redux store (also used on the NextJS example). The solution is based in two libraries which will together simplify your life. Primarily because you will have to import rootEpic and implement this logic across your application which is far from ideal. I think that solution in a real scenario where we have lots of epics separated from the components and we need to rely on several epics to handle all data required, this solution is not enough. Although NextJS provides an example of how we can use redux-observables in a NextJS application. Mainly because all the side-effects will be handled by your epics and getInitialProps is just able to handle promises. Now if we add redux and redux-observable to this equation things start getting more complicated. As you can see in these examples above it’s very easy to pass data from the getInitialData to the component even if that data needs to be loaded asynchronously.
0 kommentar(er)
