Drawbacks of traditional state management

The three types of state management that we have described are considered the traditional ways of managing state in the frontend. Even though the last type in Vue applications provides reactivity to the data model, they suffer the same drawback, which is the lack of control over the data flow. This wouldn't be an issue for small applications or applications that do not need to share state across components. On the other hand, for large-scale applications, this lack of control of the data flow will introduce data inconsistency issues.

Let's say you have a component, for example, Messages, showing a list of messages and another component UnreadMessageCounter showing the total count of unread messages. Once a new message has been read, in Messages component, its status will be marked as read. The unread counter in UnreadMessageCounter component should be updated accordingly. At the same time, the application might receive new messages through a real-time connection. A newly arrived message will be appended to the messages list and the unread counter will be updated as well. When everything works correctly, the count of unread messages in the Messages component will match the number of the unread message in the UnreadMessageCounter component. In reality, these two numbers sometimes would not match, which causes bugs that seem unlikely to happen yet pop up now and then randomly and are hard to reproduce and fix.

This is actually the chat issue that Facebook had in 2011. Back then, the unread messages counter at the top of the Facebook page sometimes showed there were new messages. But when the chat window was opened, no new messages showed up, which is quite annoying. To solve this issue, Jing Chen, an engineer from Facebook, came up with an application architecture called Flux, which essentially is a pattern that enforces one-way data flow. For large-scale applications, it solves issues caused by poor state management. There are many state management libraries that are inspired by Flux, including, Redux, Vuex and Alt.

If you're interested in finding out more about Flux and how it solves Facebook's chat issue, you can check out this talk on YouTube, Hacker Way: Rethinking Web App Development at Facebook (https://www.youtube.com/watch?v=nYkdrAPrdcw).
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.221.123.73