Discover better code patterns using RxJS

This is the simplest way to reload data using RxJS

Most of the time, we have to load data from the server. To perform the action client usually sends requests along with predefined data. Such data usually takes from the route, browser storage, or from attributes in the case when it’s a component. To load the user details we need to have userId, to load card details we need to have cardId, and so on. But what if you already load the data and you just need to reload without passing the same predefined data again and again. Sounds like a trivial task, right?

It depends.

• If we want to stay reactive and write declarative code.
• If we don’t want to create new variables which responsibility will be to keep predefined data only for data reloading.
• If we want to deal with reusable code.
• If we want to avoid boilerplate as much as possible.
• If the code should stay simple.

Then I would stick with no.

I’ve noticed that every project that I was working on had two and more distinct solutions. Our mission will be to develop data reload pattern using the RxJS library and do it well.

If you’re interested in the approach we came up with, stay tuned!

Do you want to follow along?

The final version can be found on GitHub. Remove everything from the src/index.ts and you’re ready to go, or just create a new TypeScript project from the scratch.

# Initial code without any data reload implementation

Identity — is going to be responsible for returning the value that it got.
User — model which we would manipulate with.
UserMockWebService — mock service that we would use as a web service.

UserService — is responsible for providing data which in turn gathered from the server whenever userId changes.

At the end of the code, you can see the demo section, which will output into the following:

# Initial data reload — the draft

Now we’re ready to implement data reload functionality. Let’s meet the scan operator.

Let’s take a look at it in action:

Everything works! However, here we implemented it for loading users, but we need to load not only the users but the card details as well. In this case, we would need to include the same `scan` code boilerplate again and again and that is not what we would want to do. Let’s try to make the code more generic.

# Adding custom `reload` operator

We need to extract the scan operator to avoid code duplication:

Now, instead of the scan we can use one line reload operator and it will take only one line:

It’s definitely looking better! However, there is still a code boilerplate that we need to remember. We need to have merge() with this.reload$ and reload() operator in the pipe whenever we need to reload the data. The good news is that there is a solution.

# Adding the `combineReload` factory function

In order to avoid boilerplate code from the previous example, we are going to use the factory function called combineReload() . This function will encapsulate everything for us. Here is how it looks:

Now we can remove the reload() operator and just use our combineReload() factory function.

Now it looks clean and neat. Moreover, it’s reusable and simple to use!

Further reading:

Here are a few mind-blowing articles and videos that I found super useful:

Custom RxJS operators:

• Wojciech Trawiński — RxJS Custom Operators
• Jeff Delaney — Custom RxJS Operators by Example

scan operator:
- Brian Troncone— Lear RxJS Scan
- RxJS Documentation — scan

If you are interested in RxJS, here is the article where RxJS was used to organize the communication in micro-frontends.

Micro frontends: Cross-application communication with Single-Spa and RxJS.

or this one, where you can find object update patterns:

Never get stuck again with object updates (RxJS Patterns).

Conclusion

• Did you like the article?
• Did you learn something new?
• Did you enjoy it?

Then what are you waiting for :) hit the ‘Clap’ and subscribe.