TL;DR: In this post, we are going to cover the basics of RxJS and how it integrates with React applications to manage state. We’ll build a demo app that presents GitHub user information. The app will be styled with TailwindCSS and secured with Auth0. We can get the code here.


Reactive Programming

Reactive programming can be found in many different platforms. Today we are going to be using the JavaScript implementation of it. If you were to visit the ReactiveX site, you would see that you can use reactive programming in a long list of languages. ReactiveX is a library to implement this paradigm in different languages. There's RxPY for Python, RxPHP for PHP, or RxScala for, you guessed it, Scala. Each one is going to be catering to its language, but will each have the same idea behind it.


What is RxJS?

RxJS is a library for reactive programming. Cool, so what does that mean? In most applications, we have data flow. With RxJS we can have the data flow make more sense by implementing patterns like the Observer pattern and the Iterator pattern under the hood to make asynchronous programming easier to reason about. It handles the data coming in and then executes the task you assigned to it. No worries; if all of that sounded like too much to grasp, we’ll go over it.

In React, we have been using Redux or other methods to handle data flow. Let’s talk about what it would look like if we had RxJS take care of our data stream.

What can RxJS help you manage?


  • Data flow

  • Data stream

  • State

  • Among other things

Think of the RxJS library as something that is always listening for data using Observers and Observables. (More on those in a bit!)

Without reactive programming, you have to "wake up" the application: "Hey, there’s some new data, can you handle it for me?". With RxJS, it’s saying: "What new data do you have for me? I’m ready!" RxJS is always listening.



How to Get Started with RxJS

In this post, we will briefly go over the basics of RxJS. Want to learn the high level updates to RxJS 5? Read this great post, RxJS 6: What’s new and what has changed? To dive deeper into RxJS, visit rxjs.dev or learnrxjs.io.

Let’s look at an example where RxJS would be useful. Imagine we had an application that has an input search box where the user types in a name to search for a user, post, etc. When the user clicks "Search", they will get their results back. RxJS could be used to handle that flow.

RxJS will wait for that prompt to send back the user’s search results, creating an asynchronous event.