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.
Related
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
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
Redux losing state on page reload and in my app i can't use localStorage.
What can be the best option:
I cant use localStorage for policy reason, so persisting not helping me at all.
Can I set up react-router somehow to save data in redux store over
all app
Redux router?
...
You need to store the redux state somewhere, otherwise it will be lost on reload. Options for saving the state include localStorage, sessionStorage, cookies, file system, pouch db and many others.
Handling this on you own is possible but probably unnecessary. There are libraries like https://www.npmjs.com/package/redux-persist or https://www.npmjs.com/package/redux-storage that handle it for you. Since local storage is not possible in your case you should use the first option offering various different storage engines.
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 use React and React-Router, and I have a top-level component <App/> that contains all the session data. Whenever I navigate to a different page, I lose the state information. How can I persist the state data across all the pages? (If that is not possible, is there a different way I should be implementing my session data?)
You could use session storage (sessionStorage) to store data items you want to persist across pages. This is not sent to the server and will disappear when the session is over. (You could also use localStorage for things you may want to persist from one visit to the next.
I use Redux it stores the data you want outside the components and you can connect in where ever you like.