MVC problems and the Flux solution

Each time we speak about an application with a user interface, the MVC pattern comes out. But what is the MVC pattern? It is an architectural pattern that divides components into three parts: a Model, a View, and a Controller. You can see the classic diagram describing MVC in the following figure:

Figure 1.0: Classic MVC diagram

Most of the modern frameworks for progressive web applications use the MVC pattern. In fact, if you look at the Vue.js single file component shown in the following figure, you can clearly see the three parts of the MVC pattern:

Figure 1.1: Vue.js single file component

The template and style parts represent the view section, the script part provides the controller, and the data section of the controller is the model.

But what happens when we need some data from the model of a component that's inside another component? Moreover, in general, how can we interconnect all the components of a page?

Clearly, providing direct access to the model of the components from other components is not a good idea. The following screenshot shows the dependencies in the case of exposing the models:

Figure 1.2: MVC hell

Vue.js provides a good way of communicating between parent and child components: You can use Props to pass values from a parent to a child component, and you can emit data from a child component to its parent. The following figure shows a visual representation of this concept:

Figure 1.3: Vue.js parent–child communication

However, when multiple components share a common state, this way of communicating is not enough. The following are the issues that would come up:

• Multiple views may share the same piece of state
• User actions from different views may need to change the same piece of state

Some frameworks provide a component called EventBus; in fact, the Vue instance itself is an EventBus. It has two methods: Vue.$emit(event, [eventData]) and Vue.$on(event, callback([eventData])). The following is an example of how to create a global event bus:

// EventBus.js
import Vue from 'vue';
export const EventBus = new Vue();

// HelloWorldEmitter.js
import { EventBus } from './EventBus.js';
EventBus.$emit('an-event', 'Hello world');

// HelloWorldReceiver.js
import { EventBus } from './EventBus.js';
EventBus.$on('an-event', eventData => {
 console.log(eventData);
});

Even with a global event bus, making components communicate is not easy. What if a component that registers to an event gets loaded after the event is fired? It will miss the event. This may happen if that component is inside a module that gets loaded later, which is likely to happen in a progressive web app where modules are lazily loaded.

For example, say that a user wants to add a product to the cart list. She taps on the Add to cart button, which is likely to be in the CartList component, and she expects the product she sees on the screen to be saved in the cart. How can the CartList component find out what the product is that should be added to its list?

Well, it seems that Facebook programmers faced similar problems, and to solve those problems, they designed what they called Flux: Application architecture for building user interfaces.

Inspired by Flux and Elm architecture, Evan You, the author of Vue.js, created Vuex. You may know Redux already. In that case, you will find that Vuex and Redux are similar, and that Evan You saved us time by implementing Vuex instead of forcing every programmer to integrate Redux inside a Vue.js application. In addition, Vuex is designed around Vue.js to provide the best integration between the two frameworks.

But what is Vuex? That is the topic of the next section.