MobX in React Tutorial - Advanced DataStore with RxJS

This video is part of our series on MobX in React. See the full playlist: https://youtube.com/playlist?list=PL8eRhjTr138bCtemO2yWWQvpxxRHZBmVk In the first video, we presented the basics of MobX - what MobX is, how it works and how to use it outside React. We also took a look at how MobX can be integrated with React components. You can find it here: https://youtu.be/yZ0aw_LSQck In the second part, we reviewed the types of states in SPA and point areas for MobX. Check it out here: https://youtu.be/q90RtZ34zdY We promised you a third part of the series with a presentation of practical examples. We decided to break it down into several tutorial videos to give you a deeper dive into the topic. Here comes the first one - Advanced DataStore with RxJS. It presents a step-by-step guide to retrieving data from the backend with non-trivial features like: 👉 cancellation 👉 retrying on error 👉 polling You will also learn how to start and stop streaming data from the server side. … You can run the project in the presentation here: https://github.com/codilime/mobx-in-react-scalable-state-management/tree/episode3-rxjs Find more about React on our blog: https://codilime.com/blog/ 00:00 Introduction 02:17 Why RxJS? 02:59 Data flow in MobX 04:03 Tutorial: MobX in React 10:22 UserDetails DataStore 13:32 RxJS to read the data 20:33 Toggle spinner 21:38 Refresh button 24:56 Start polling 27:03 Stop polling 29:18 Retry on error 34:18 When to start? 42:22 Summary – Piotr Gejgalis is a principal frontend engineer at CodiLime with many years of experience in implementing and designing Single Page Application architectures. His main areas of interest are frontend architecture, modern build tools, modularization, TypeScript wherever possible, and technical mentoring. #mobx #react #reactjs #statemanagement #frontend #frontenddevelopment