Using socket.io in React-Redux app to handle real-time data.

React + Socket.io
GIFs used in this article are quite large and could take some time to load

Socket.io is very popular to handle real-time data and therefore I thought why not I write my next article on how to use it in a React-Redux app.

I have used Redux-Thunk as the middleware. But for more complex scenarios to handle real-time data, Redux-Observables with RxJS would be a better fit.

This article explains

  1. How to create socket.io express server
  2. How to consume the data received from the server in React-Redux app

The example app

The sample app used

A small TO-DO list app which shows how you can build a real-time app using the following

socket.io is used both at the server as well as the client
If you want to know how to install and setup mongodb on your local machine, then refer the section 2. Database(MongoDb) under the section Setting up in this article I wrote some time back.

What does this app do?

  • This app creates a basic TO-DO using React-Redux and handles the tasks real-time.
  • It just handles two functionalities to keep it really simple

* Add a new item — If you have multiple tabs open of the To Do example and if you enter a new item on any one of the to-do tab, immediately you will see the new item is reflected in the other tabs as well

* Marking an item as complete/incomplete — Similar to adding an item, when you mark an item complete/incomplete, immediately you will see this reflected on the other tpublishingo-do tabs as well.



Understanding how socket.io works in this example

Now let us try to understand how socket works in this example under these three scenarios

I will not do an exhaustive code walk-through, but please check the code repo I have mentioned above.
  • On Initial Load
  • On adding a new item
  • On marking an item complete/incomplete

On Initial Load

  • In the above GIF you can see that after we start the server and then go to the client and if we open the to-do app, a socket connection is I will not do an exhaustive code walk-through, but please check the code repo I have mentioned above.established with the server.
  • Similarly, if we try to open another tab for the to-do app, you will see another socket connection with the server is established.
Socket connection can be checked in developer tools under the network tab in WS tab, as shown in the above GIF.

On adding a new item

  • As you see above, when we add a new item on client, we fire an event addItem, since the server is watching this event, as you see below, we write the new document into TodoList collection.
  • If the write was successful, then we emit an event “itemAdded” to all the sockets connected.
  • At the client, we watch for this event, and then dispatch the action to pass the new item to the reducer which updates the state and therefore the screen.

On marking an item complete/incomplete

This is similar to adding new item, but here

  • We fire the event “markItem” from client and the server will act on this event and update the completed flag to true in the TodoList collection.
  • And if TodoList collection was updated successfully, then the server fires “itemMarked” which will be acted by all the clients by dispatching an action which the redux reducer picks and update the state, and therefore the screen.

Setting Up

If you are interested to try this yourself, then please follow the steps to set this code in your repo easily.

  1. Clone the project into your local folder
git clone https://github.com/Gethyl/RealTimeTodo

updates the state2. Change to that folder.

cd ./RealTimeTodo

3. Install the dependencies by issuing yarn install or npm install


Running the example

Just issue the below commands and you are good to go 😉

Client

To start the WDS (Webpack Dev Server), run the below command.

yarn start

Server

Since this example uses MongoDB,

  • Check if MongoDB service is running by issuing the below command.
service mongod status
  • If the status of the service is Inactive, then bring up the service by issuing
sudo service mongod start
  • Now that the MongoDB service is up and running.
It is not required to create TodoList collection in MongoDB, because first time when you add the item and if the collection is not there, MongoDB will create the collection.
  • And finally start the server by running
yarn run server

Conclusion

This way of handling real-time data using redux-thunk may be okay for a small app which doesn’t require lot of complexities. But I would encourage you to go through how to use redux-observables and RxJS, if you plan to build a real time app to handle multiple observables and to chain/merge them.

Until my next article…..

Happy Coding!! 🖒