How to subscribe a Redis channel from a React Component

Question

How can I subscribe a redis channel inside a React Component when it is mounted (i.e, inside the componentDidMount() ) ?

In the internet almost everywhere I see the redis implementation with nodejs but can't find any sufficient hints how to use this in React App.

Actually I want to update my ecommerce dashboard (react app) data without refreshing the page. In the backend I used djangorest framework. When any API is fired to change any data the python code doing its work and also publishes a message in a specific Redis channel.

I want to subscribe that channel from the client (react app) so that it can consume this message and update it's content real time.

Kennie

Answer 1

A react component (client technology) should not be able to access redis (server technology) for obvious security matters.

If you use react at server side to generate responses with react using node, that's node that should make this access.

If you want to access redis from a web front end (with a web browser), you must establish the following architecture:

• React accesses a server using websocket and listens for messages.
• The server, in node js (using socket.io) or in aspnet core (using signalR) accesses redis and communicates changes to the client thanks to websocket technology.

If you want more details about how to do, you should describe the technology stack you use at client side.

But to make it short, for client side, the best is to use the redux observable stack. In this case, that would be an epic that would update the redux state whenever the server notifies something. If you are not comfortable with rxjs (this is very understandable!), then the easiest would be to use mobX (https://mobx.js.org/README.html)

Aretino

Okay then, would you kindly give any hints how can I make my component real time updated using the published message in the Redis channel? – Kennie

as I mentioned, describe the stack you have at client side, and the server technology you use – Aretino

Thank you for you time. I am using React and Redux in frontend. In Backend I used django rest framework. This is an ecommerce application. My plan is whenever an API is fired (suppose a product sold API is fired) the controller function (in django 'controller' is called 'view function') does its work (i.e, product stock decrement, product added into invoice items etc.) and a message publishes into a redis channel. Now the React client application (dashboard) changes itself reading the message. If you kindly explain this editing your question how to use the socket with React or refer a tutorial – Kennie

If you don't have sufficient time then please refer a good tutorial/article on how to use React, Socket, Node and Redis. It will be too much helpful to me. – Kennie

@shamim just do a google search for react redux "redis" django and you'll find lots of tutorial blogs. However note that technically there are two completely separate tasks: Django+Redis on the one hand, vs Django+react+redux on the other. You don't need a tutorial that covers everything together, just two good tutorials, one for each task. This will give more search results so you will have better selection of tutorials. – Mise

Alhamdulillah! I have done the tasks. Firstly I am sending data from django view to redis server. The React frontend app is connected to that redis server via socket.io. Now, whenever a data is pushed by the django to the redis server my react app can catch this (and I am using the redux to utilize this data inside react application). Thanks @Aretino – Kennie

Ok but then I don't think you followed Stephane advice "A react component (client technology) should not be able to access redis (server technology) for obvious security matters" and that is a big mistake. So it's a bit strange that you accepted his answer if you didn't actually follow it! :) – Mise

I'm not much into this universe, but django is a python web framework. As python is not a web browser technology, I assume django is for python what asp.net is for dot net, or what express is for node. But I find it horrifyingly unsafe to permit a web front end to access a redis server. I would be the infrastructure admin, I would cut any access to redis server except for couple or server application. – Aretino

@Oliver, Thank you for your time and comments. Actually I have implemented almost Stephane's mentioned architecture (i.e, **"React Access a server using websocket" and ** "The server in node js access Redis"). That two points made me sense to establish the communication. I still don't know whether a react client app can communicate with Redis server without any socket or not. Is it possible actually ? – Kennie