I know that the typical way to enable redux devtools on a web app is to configure it when creating your store. There are many examples of how to do this online.
What I'm wondering is, is there any method / hack I can employ to try to connect Redux DevTools to a web app that I didn't develop? Say I happen to know that some web app uses Redux, is there anything I can do / code I can run in the developer console to connect it to Redux DevTools after the fact, so that I can inspect some of the actions that are fired on the page?
React DevTools, for example, seems to work on websites that use React without having to configure it in the code.
No, it's not possible.
The Redux DevTools extension must be configured as part of the store setup process, as it actually wraps the original store.
The React DevTools work because React exposes some internal functions that the React DevTools can call to read React's data structures.
Unfortunately, this is impossible, but I imagine how cool it would be to go to Facebook or Instagram and see what's going on there in the store.
Although of course I can be wrong and this is possible if you solve the following issues from the browser console:
Install the npm package on the server where the site is stored
npm install --save #redux-devtools/extension
You need to write code in the browser console that will be executed on their server, namely, you need to tell the server that now it needs to transfer information from the store to your browser extension.
Find the lines of code where they create a store and add:
That's all, if you have any problems, write, we will help))
Related
I have the following situation:
I have a react web application that is deployed on an NGINX web server via Jenkins. In some cases, my web application does not show up in the browser after I deployed a new version of the application. When you open the web application, it only shows a text: "Loading...".
A quick solution to this problem is to delete your browser data and refresh the web application.
My question: What is the possible cause for this problem or how can I find out what the cause is? I don't want that the users of this application have to delete their browser data when I deploy a new version.
From my experience, It could be because of several reasons:
1) The javascript could be breaking.
2) You might be using some caching strategy that causes the javascript to be cached. Service worker for example.
3) Problem with your react router configuration.
4) A network call might be taking too long to respond.
Need a minimum reproducible example to debug further.
I have been searching how to solve this issue for a couple of days with no success, so I decided to open a question here. So I have got a React app which uses Redux and Firebase as a database. Everything loads ok in every desktop and mobile browser except Facebook's in app browser. When I open it through my phone their browser fires and gets the title, it loads the injected scripts from Netlify but does not execute any Javascript and I get a blank page.
I have also tried to prerender the app with React Snap and then my app loads, but never preloads the Javascript and therefore the loaded visible content only stays HTML and CSS and nothing Javascript related works.
I am asking for help since I really have no idea what is wrong. There was no errors on build and as I said on every other browser, the web app works.
I have generated the app with create-react-app.
If someone have any suggestions, that would be helpful!
Okay I found what caused the app not loading in Facebook's in app browser. The problem was due to the Notifications API and the fact that it is disabled there. My app was using it, therefore it crashed in the beginning and the bundle did not load at all. That is why I had a blank screen on the non prerendered version and no javascript on the prerendered. Both ways there was no JS loaded because of this. So now I just check if the user agent supports the API and run my functions accordingly. Hope it helps to someone with the same issue.
I'm trying to implement a form of deferred deep linking where a user follows a Universal Link and gets sent to my web site because they do not have the app installed. What I want to do is the following, but I am unsure how to do it:
When they land on the web site, I will create a cookie with information pertinent to how they got there.
I will then direct them to the App Store to install the app.
When they install the app and open it, I should be able to read the previously created cookies to figure out where to direct them in the app.
Step 1 and 2 are easy, but I'm not sure how to read cookies from Safari on iOS and Chrome on Android (presumably no other browser would even be possible) from React Native.
I am new to react-native world. Following few tutorials, I found that it react-native app runs on javascript engine on mobile. I am following ios tutorial. So when I go to localhost:8081/index.ios.bundle it loads JS for the app. I know I can use ngrok to manipulate this URL.
I have multiple concerns with this:-
If I change the URL of js from something local to something remote, this would result in a completely new app and now I don't need to go through the App Store to upgrade my app version. Can this be a potential issue in the future?
Since anybody can open this JS in a browser which might have important information like client id and secret for the app, can this be an issue as well?
I am not 100% sure. You can indeed update hybrid app easier and if it is only a quick fix you don't need to go through apple store verification process. Apple can also delete your app and ban you if you don't follow guidelines. Usually your js is local in production for instant app start time, and the network is used only for fresh data.
This is solved with an authentication mechanism.
As far as I know, push notification can be used in react native, even when the app is closed. would it be possible to use push notification to run a background task in react native?
for example, when a push notification is sent to a device, it runs a function to fetch data from server and update database.
https://github.com/zo0r/react-native-push-notification
Push notification and data notification handling part could be done using react-native-firebase easily (I recommend to use react-native-firebase instead of react-native-push-notification because it has wide community support and support for many more firebase services)
And in here it show how to fetch data in background for iOS; with the few modification same thing could be done in android also.
Useful links :
https://rnfirebase.io/messaging/usage
https://www.npmjs.com/package/react-native-background-task
Please have a look at react-native-push-notification#silent
Android:
If your Android app is not running when a silent notification is received then this library will start it. It will be started in the background, however, and if the OS starts your app in this way it will not start the react-native lifecycle. This means that if your notification delivery code relies on the react-native lifecycle then it will not get invoked in this situation. You need to structure your app in such a way that push notification. configure gets called as a side effect of merely importing the root index.android.js file.
iOS:
The crucial bit of an iOS silent notification is the presence of the "content-available": 1 field.