How to subscribe a Redis channel from a React Component - reactjs

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.

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), in aspnet core (using signalR) access redis and communicate changes to the client thank to websocket technology.
If you want more details about how to do, you should describe that 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)

Related

React Native - Real-time chat/push notifications on PHP/MySQL back-end

I am developing my first React Native app and are struggling with the proper implementation of push notifications and real time chat. The attached image shows the current layout without chat/notifications.
The client application uses Firebase only for social network authentication (login) and image storage.
Everything else is kept back-end using PHP/MySQL which also communicates with Firebase for session token validation and email authentication (login).
Now i want to implement a real-time chat function and push notifications but are struggling with the proper way of doing it. If i have understood correctly one way could be: Socket.io (for real-time chat using mysql for archive storage) and Onesignal (for push notifications)
Or is there a better way of doing this when using a PHP/MySQL as back-end?
Any ideas or input is greatly appriciated.

How to protect your api from a compromised client

I've built a backend Stripe server to handle payments for my react native and react app.
Something I'm concerned about is what happens when someone gets accessed to the decompiled client source code.
Is there a way I can ensure that only authorised clients can make api calls?

Connecting react native to redis db

I'm trying to make a React Native application that needs to exchange data with a remote Redis server.
I've read on the web that I need to expose the redis API but I can't find anything about this.
The problem is that i keep getting results for react.js that is web and it's not what i'm searchng for.
Can someone write out a solution that i can adopt?

How to handle view access with reactjs?

If you have a web application with a (react) frontend communicating with a REST API, what is the best way to limit access to the views?
Let's say youre not creating a single page app, you have multiple server side routes all delivering a react frontend. These routes should all be protected via authentication, so basically even the (non sensitive) react frontend shouldnt be delivered to the client. Do you handle this on the frontend on every page? Or does that mean that i might be using the wrong tool? If you do a server side session login you would have to handle the authentication and thus especially the entity layer in two spots (limiting access to views and API). I guess you can propagate the web server login to the API or vice versa, but i'm really unsure of what is the best way to go here.
I really hope the question is not going to be viewed as "subjective".

Does React.js require server side?

All React.js introductions seem to suggest that React uses a server to create virtual DOMs and sends diff operations over to client, but I just tried out the flux-todomvc which it didn't need a server at all. What's going on? Is the "server side" work done inside web worker thread?
React.js does not use a web server to create virtual DOMs. It builds the virtual DOM and does its diff operations on the client's browser.
People mostly use React.js to implement front-end Views (MVC View) of their web applications.
But you can use Node.js to render them on the server side if you like (for seo purposes etc.)
http://facebook.github.io/react/

Resources