I have a react app and I would like to implement something like a debugging component that can change data/toggles on the app that is accessible on each page, floating rather than integral to the page.
I made a POC that was integrated into one page, but I'm wanting to make it more mobile and agnostic.
How would one go about this?
I'm running a local express dev server to push mock data and initially I was specifying the mock data pushing that info with a login form push, but since refactoring I am struggling to think of how to persist the data, especially if I refresh the page?
You must save your data in localStorage,everytime your component start you load your data, if you havent your data load from server.
Finally you can use useContext to access data through all application.
localStorage will work as cache data: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
useContext to accessData: https://reactjs.org/docs/context.html
Related
I have a react application that needs read configuration JSON from remote API before rendering. I intend to store the configuration data in local or session storage for access after the app is mounted.
I tried to fetch the remote data in the html header using javascript and store it in session storage, but the react component doesn't get the data every time, it seems the app is rendered before the configuration data is stored in session storage.
Any help or suggestion is appreciated!
If sounds like you need to wrap your application in a HOC which will take care of checking for previously downloaded config in session storage, or download it if it's not there. This component should show a loading state until you have what you need, to use the application.
The problem that I'm facing now is, there's a profile tab which shows some information on itself. I typed interface solutions like "input". After I save its value to data(data that placed on another component, especially contained in this.state). Then I shifted to component which renders its interface. In detail, I mentioned its value to which to show. Soooooo, I can't understand that how to still show it after reload? I hope it pulls something from back-end or axios or git things. Briefly, "how to maintain the data on the profile tab after reload? I'm in react js stuff.
React state is just a variable which stores data. When you refresh your browser, the browser clears its value from memory and reinitilizes that variable.
To get back that data, you have to store that data somewhere which persists even after browser refreshes like
You can use session Storage or local storage.
https://javascript.info/localstorage
You can user server to store your data and use axios to fetch data using useEffect hook.
You can also use the npm package redux-persist or react-persist https://www.npmjs.com/package/redux-persist
I built a PWA with react, react-redux, react-router, and react-loadable. I built an app with Corona which uses a webview to point to the PWA. [The native app gives me access to features the PWA does have on iOS]. That works fine. However, the webview doesn't support service workers. As a result nothing gets cached and the app reloads the page every time it is opened.
Is there a way to store the js/css bundles using react-redux?
Perhaps another way to achieve storage (full or partial) to reduce the networking requirements on subsequent opens?
At the moment I am not looking to cache the API calls that happen to a database, but the actual components that are rendered (or the bundles that are loaded to render the components).
I expect this is not a new question, but I've found nothing so far... which leads me to think there is no good answer.
I think what you want does not fit with reduxs intentions as a state source. I think localstorage maybe a thing that could help your need.
Like duc mai pointed out, in a browser/webview environment you can usually use the localStorage or sessionStorage API to persist data.
When building with React, I use redux-persist to automatically save the redux state with every change. It persists the state as stringified json.
I am building a Shopify app with React and Apollo, using apollo-link-state to manage a local data store.
Because of the way Shopify embedded apps are done, I end up updating the local data store from a modal, which is technically an iframe pointing to the same URL as my app.
My problem is that the main app doesn't realize that the local store has been updated (from the iframe), and components are thus not re-rendered.
Is there a way to manually force apollo-link-state to check if the data has changed?
I want to store my rendered component (in ReactJs) into browser history of clients, but I don't want to use Redux for it, because it is so complicated for me.
Is any way for using local storage or cookies as alternative solution for Redux and React Routing?
Edit:
I need to using react route with cache rendered data, It means after route change and got back to previous page again, rendered data still remains there and no need to send request to server again! Like this Redux example, But need to do it without Redux.
Thanks.
Redux is a state management, not related to cache or local storage. If you want to cache your components then you should look at this https://developer.mozilla.org/en-US/Apps/Fundamentals/Offline
You need to create manifest which will store your components in the cache.