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/superdev163/rxjs-state-poc
- Demo: https://rxjs-poc.web.app/
Top comments (4)
Helpful article
RxJS is amazing, but there can be a lot of rough edges, and sometimes it can cause confusing bugs if you don't understand some concepts. Every app can have confusing bugs but if you use RxJS, the hard stuff is RxJS rather than the application code itself, so you only have to learn the concepts once, then every app becomes easy.
But even then, RxJS still has some rough edges. I made StateAdapt to smooth these edges. I wrote an article about it called "How to not regret useState" that explains this for React.
Interesting approach. But a few questions... how to prevent double subscribing/init when we run in strict mode? because even with an empty dependency array (that you missed) this hook will run twice.
Also, why have an exported const object when you could just export the methods themselves? Esmodules exports are objects, so no need to wrap everything in an object, if you want to keep the subject private to the module you just don't export it.
Another one... what are the advantages of RxJS in react when we could easily create a context and access methods from any component down the tree?