State Management with RxJS and React

Introduction

Building big web apps can be tricky, especially when you have lots of different pieces of information to keep track of. But don’t worry, RxJS is here to help! It’s like a really cool tool that helps you manage all your data in one place.

With RxJS, you can create these things called “streams of data” that different parts of your app can use. It’s like a big river flowing through your app, keeping everything connected and in sync.

In this article, we’ll show you how to use RxJS to build web apps that are really easy to manage and work great. By the end of the article, you’ll know how to use RxJS to manage all your data and build even bigger and better web apps!

Why RxJS for State Management ?

Hey, do you ever get confused when you’re building a big web app and you have lots of different pieces of information to keep track of? That’s where RxJS comes in! It’s like a really cool library that helps you manage all your data in one place.

With RxJS, you can create streams of data that different parts of your app can use. It’s kind of like a river flowing through your app, keeping everything connected and in sync.

RxJS also helps you break down your app into smaller pieces, which is like having different rooms in your house for different stuff. That way, it’s easier to keep everything organized and find what you need.

Overall, RxJS is a great tool for managing data in big web apps. Whether you’re building a simple app or a really big one, RxJS can help you keep everything under control!

A to-do list example

The easiest way to apply a new technology or a new proof of concept is to make a to-do list.

The Store:

const subject = new Subject();

const initialState: Task[] = [];

let state = initialState;

export const todoStore = {
  init: () => {
    subject.next(state);
  },
  subscribe: (setState: any) => {
    subject.subscribe(setState);
  },
  addTask: (content: string) => {
    const task = {
      content,
      id: uid(),
      isDone: false,
    };
    state = [...state, task];
    subject.next(state);
  },
  removeTask: (id: string) => {
    const tasks = state.filter((task) => task.id !== id);
    state = tasks;
    subject.next(state);
  },
  completeTask: (id: string) => {
    const tasks = state.map((task) => {
      if (task.id === id) {
        task.isDone = !task.isDone;
      }
      return task;
    });
    state = tasks;
    subject.next(state);
  },
  initialState,
};

This code defines a simple store for managing a to-do list using RxJS. The store is implemented using a Subject and provides methods for adding, removing, and completing tasks.

The init function initializes the store by publishing the current state to the subject using subject.next(state). This function is typically called when the app is first loaded to ensure that the store is up to date.

The subscribe function allows components to subscribe to changes in the store. When the store is updated, the setState function passed to subscribe will be called with the updated state. This function is typically used by components that need to display the current state of the store.

Overall, init and subscribe are two important functions in this code that enable developers to manage the state of a to-do list using RxJS.

Usage:

It’s very easy to implement this kind of state management, just do this one the highest level:

const [tasks, setTasks] = useState<Task[]>([]);

  useEffect(() => {
    todoStore.subscribe(setTasks);
    todoStore.init();
  });

This code uses React hooks to subscribe to and initialize a store that manages a to-do list using RxJS.

The useState hook creates a state variable named tasks and a function named setTasks for updating that state. The [] argument passed to useState sets the initial value of tasks to an empty array.

The useEffect hook is used to subscribe to and initialize the todoStore. The todoStore.subscribe(setTasks) line subscribes the setTasks function to changes in the store. This means that whenever the store is updated, setTasks will be called with the updated state, and tasks will be updated accordingly.

The todoStore.init() function initializes the store by publishing the current state to the subject using subject.next(state).

Conclusion

So that’s it! We’ve learned how to use RxJS and React to build a to-do list application. We used RxJS to manage the state of the application and React to display the current state to the user.

We saw how RxJS provides a powerful set of tools for managing state, including observables, operators, and subjects. And we also learned how to use React hooks like useState and useEffect to update the application state in real-time.

By using RxJS and React together, we’ve built a cool app that’s easy to use and maintain. And we’ve learned some really valuable skills that we can use to build even more amazing web applications in the future!

If you think the article is too obscure, check these out:

• Source Code: https://github.com/starneit/rxjs-state-poc
• Demo: https://rxjs-poc.web.app/