Education Ecosystem Blog

Neither the latest anime title nor requiring 1.21 jigawatts of power, React Flux is really a powerful set of tools for developing and delivering web content. After all, what is the ultimate goal of the programmer if not to make sure the end user has the best possible experience. To that end, a good programmer maintains a set of tools, much the same way as a good auto mechanic.

In delivering content, there are three core areas that need to be handled. The traditional model is covered by the MVC acronym, standing for Model-View-Controller. In this framework, the information the user seeks is stored in the Model, which is then delivered as a View. Any interaction with this data is handled via the Controller. This sets up a fairly circular workflow – user views content, interacts with it, which updates the Model when then generates a new View.

React is generally seen as the V in the MVC programming framework. Its role in this is to handle how the user sees, and in most cases is able to interact with, the content being delivered. In reality a Javascript library (.JSX), React creates, in essence, what the user sees as the end result of the programmer’s efforts.

By providing the end user with opportunities to interact with the content, React generates new views. As an example, if the user adds an item to a shopping list, React is the piece that lets them see this change after updates deeper in the programming.

It is with the addition of Flux that this process gains a little extra horsepower. So, let’s lift the hood a little on this process, and examine some of the important pieces.

1. React is as it name implies – a reaction.

When the end user does something with the content – like the aforementioned shopping – the Controller feeds this action back to the server, which manipulates the Model, which then updates the View via React. But working with the Virtual DOM feature, this loop is twisted a bit. Using Virtual DOM with React means the shopper can change the color of the car they are considering without reloading the entire content of the page. All the needed data has already been delivered, so the change is made quicker, making the customer happy.

Check out the React.js learn page for more information and guidance. The React learn page contains videos, tutorials, and other valuable information that will last you the whole journey! Check it by clicking here.

2. Flux takes this a step further by essentially replacing the M and C components.

With Flux, the process follows an Action-Dispatcher-Store-View flow, with the View still being rendered by React. When using Flux, React creates Actions which are then handled by the Dispatcher, allowing the Stores to update, which feeds new information to the View.

So while the essential process remains the same as with the MVC model – user sees content, interacts with it and then gets new content – the actual process is significantly changed. Imagine keeping the shell and interior of a car the same (React), while completely overhauling the engine and powertrain (Flux).

3. In much the same way as driving a car, Flux makes the programming process more linear as opposed to the circular MVC framework.

To a driver, the following process is quite straightforward: Press the gas pedal which sends more fuel to the engine, which then sends more power to the transmission, which then causes the car to move forward.

This same mentality applies to Flux. While Flux itself can be quite complex, the goal is to make the process for the end user simple and linear. And the programmer who delivers on this keeps his or her job, a simple line indeed.

4. As with the inner workings of an automobile, Flux can be broken down into smaller components.

As mentioned above, these are the Actions, Dispatcher, Store and View pieces. To follow a standard flow, we can look over the shoulder of an end user as they interact with content on a site allowing them to purchase a case of motor oil.

Once they have received their first view (via React), the user clicks on the item of which they want more details. This is still a fairly static action, so there really aren’t any real changes at this point. But, they like what they see, so decide to add the item to their shopping list. This creates an Action, which the Dispatcher relays to the Store. The Dispatcher is in essence a traffic cop, pointing each Action in the right direction. The Store is where the data is maintained. The Store is now updated, which creates a new change event which is sent back to the user as a new View – there is now a check next to the item they want to purchase, and the Store is listening for the next Action, perhaps the purchase of a funnel.

5. So, what does this all look like? Well, like all programming, it can be daunting at first glance but there is a definite logic there.

A talented programmer can create this logic with the fewest possible steps, making the code more stable, making the customer experience more satisfying, making the employer happier writing paychecks. The following example is quite simplified.

To start with, a Dispatcher must be defined:

Var AppDispatcher = new Dispatcher();

And then the Dispatcher needs to be set to listen for an Action:

<button onClick={ this.createNewItem }>Add Item</button>

Next, the action needs to be defined:

addNewItem: function( evt ) {
				AppDispatcher.dispatch({
					actionName: ‘add-item’,
					addItem: } name: ‘5w-30 oil’ }
				});
			}

The Store also needs to be defined:

Var ListStore = {
Items: [ ]
};

Once the user creates the Action, the Dispatcher then updates the Store:

Var ListStore = ..
			AppDispatcher.register( function( payload ) {
				switch ( payload.actionName ) {
					Case ‘add-item’:
					ListStore.items.push( payload.addItem );
					break;
				}
			});

Now, the Store knows the user wants that case of oil, but the customer doesn’t know yet that the Store has been updated. And that update, with the associated revenue for the site, is the ultimate end of what the programmer has created.

So, what’s the next step? Well, that may be giving too much away here. This document is intended as an introduction to some of what the React Flux framework can provide. React Flux provides an excellent set of tools for both new and experienced programmers. And it allows the above example to be completed with just a few more steps.

It may be possible to sort through the reams of pages on the Internet to add the last lines to this code. To, in effect, get the power from the engine to the transmission. But there are also a handful of options that make this search far easier to execute.

One of the best is via Livecoding.tv, where it is possible to observe programmers as they work, which is frequently a superior method of learning new skills.

Skills like making sure the user gets a case of oil on their doorstep in a few days, which means the business owner gets their payment, and means the business owner can pay you.