React and Reflux usage in real-time applications based on websockets (Part 1 — Introduction)
In real-time applications (chats, gaming, real-time financial information etc) you often need many objects to interact with one data source (update some data, perform some actions etc). React JS is powerful UI library but React itself doesn’t have really powerful tools to work with data, data sources and connections.
Reflux is simple unidirectional data-flow architecture library and one of the popular flux solutions for React applications. Its Store-Action-Component approach is very useful for working with various data sources and must be very familiar for developers with some experience in massive fullstack frameworks like Ext JS and Angular or MVC frameworks like Backbone. But there are quite few examples for react — reflux especially for interaction with data sources and WebSockets. The following example came from my experience with React, Reflux and WebSockets. Using this example you can easily build real-time application using React and Reflux.
This tutorial show a general logic useful for building real-time application working with WebSockets.
To run it on your local environment you can simply clone the repository, run npm install in both server and client folders and run server and client applications in separate command line instances (by using npm start in each folder). Of course you need to have node and npm installed on your machine. Server and client applications are described in detail in further parts of this article. (See Part 2 and Part 3);
Let’s imagine we need multiple UI components receiving updates from one data source. For example — list of users with message count for chat room or list of users with their balances for online game, or something else.
The counter for each user receives real time updates from WebSocket. Counter can be disabled by clicking on it (RED counter). Disabled counter stops receiving updates. Clicking on disabled counter enables in back (GREEN counter = enabled state)
To implement this task we can use the WebSocket protocol to subscribe for and receive real-time updates from the server as well as send some actions and payload to the server from client.
On the client side we implement React JS app using Reflux architecture to deal with data flow and WebSocket updates/actions.
More detailed information about Reflux can be found here.
Lets assume that we need the following components.
WebSocket server — BE application that implements required actions and sends updates to the client. For this task we implement it using node JS http module and socket.io library.
CounterStore — Reflux JS store — works with WebSocket connection and stores data updates in its state
CounterActions — Reflux actions — work with store to init/destroy it and to send some actions and data to server
List — Reflux component, renders Users list, initializes store
Item — React component — renders item of the list (user and counter)
Counter — Reflux component — dynamic counter component, changes states depending on store updates
Main — jsx file for bootstrapping our React JS application
Folder structure for client application can be found here
