Problem
I want to save data in the store with Redux, like tokens and user-related data to be used across the whole application (I'm using React).
The problem is that Redux does not persist in the state when refreshing a page.
Thoughts
I'm not convinced about using redux-persist since the package doesn't seem very active.
I've seen RTK Query, but from what I'm understanding, I still have to make the API call to get the data (even if the actual call is not made and gets the cached data). Seems too much of an overkill.
Maybe I'm missing some core Redux or React concept? It feels a bit crazy for me not to be able to find a go-to package (or any other method) just to save a piece of data and be able to access it across the whole application without resetting on refresh :/
try to save your Redux states in localStorage
Redux-persist doesn't need to be very active - it works for half a decade now and there is just no need for a lot of changes. It works.
It is the to-go-package for that purpose.
Related
I just got acquainted with MOBX and I'm trying to understand the principles of creating applications with the help of MOBX, using the example of a finished application. I had a question, because I noticed that each page of the app has its own store for orders (the difference is one field). It's definitely the same data. Is it right approach?
Previously, in React applications, I used one store, and any component could use data from it. In this one each page use its own store for specific data and it doesn't matter if we have already created a store with this data for another page.
I have never created duplicate data. But I'm not sure how it should look like with MOBX.
Thanks for help.
I want to understand how create store with MOBX correctly. Can we share one store between different pages/components?
As I understand if we make a request by using redux-saga, the response is going to be stored into the redux store. But it is a bad practice to store all the stuff in the redux store. So is it ok to create separate module with API requests and use them when you do not want to put response in redux store ?
I would appreciate articles on this topic (couldn't find it on my own).
Making requests in a file is totally fine in some cases. Just do it carefully in order to prevent interfering with app performance (if a component is rendered multiple time and you need just one request do it in the parent, etc.)
As for articles I couldn't find any to exactly this topic, but react docs have an example of api calls (please ignore the class one and check the hook example bellow). Now I would recommend you too use a service for this to abstract the fetch logic, but the idea is there and, while this cases shouldn't happen a lot, I don't see any reason to avoid this if you only need some data in a specific component and there is no use in saving it to the state .
EDIT:
You have runSaga which according to docs
Allows starting sagas outside the Redux middleware environment. Useful if you want to connect a Saga to external input/output, other than store actions.
So you don't really need another library. Regarding the architectural problem this is what I was trying to emphasis with the react docs. I don't know if there are any articles in this direction (on a quick search I couldn't find any either), but I think for most of the data you want a reducer to prevent unnecessary reloading of the same data.
However there isn't anything suggesting not to do it as far as I know (neither in docs, articles, etc.). Moreover, in some cases, this can a good thing, and the fact that no docs suggest otherwise is a prove in this direction IMO.
PS: Also a discussion about using saga without redux here
I'm very new to ReactJS and Redux (but not development, in general). I'm trying to determine how best to approach a SPA I'm building.
My app will download datasets via API and display them in a spreadsheet. I'd like to use Redux to store the data. Is that the right approach? We could potentially be looking at very large datasets. Would it be more appropriate to only store the data that is currently rendered in the spreadsheet?
I'm totally lost as to an approach that would be efficient in terms of rendering speed and memory management as well as mindful of potential network issues as rows of data are requested from the API.
Thanks...
When you are working on a react/redux app, you generally will have two options to store your state: local component state or in redux. There are quite a few blog posts out there detailing when each is appropriate. This github issue comment from Dan Abramov, one of the creators of Redux, pretty succinctly sums it up
Use React for ephemeral state that doesn't matter to the app globally and doesn't mutate in complex ways. For example, a toggle in some UI element, a form input state. Use Redux for state that matters globally or is mutated in complex ways. For example, cached users, or a post draft.
Sometimes you'll want to move from Redux state to React state (when storing something in Redux gets awkward) or the other way around (when more components need to have access to some state that used to be local).
The rule of thumb is: do whatever is less awkward.
Both component state and redux state can be used performantly, so I wouldn't worry too much about that when choosing. From what you've described, the questions I would ask are
Do I need to have multiple spreadsheets of data loaded, but not all displayed at once? For instance, maybe you have multiple tabs of spreadsheets and you want to be able to tab through them without having to re-fetch the data each time
Do I need access to the spreadsheet data in a lot of different places, or is it fairly localized?
Will I be able to modify the data in the spreadsheet, and if so, how difficult would it be to perform those modifications using redux and without?
There are quite probably other considerations as well. In general, the advice given is to stick with just using React local component state until it starts feeling awkward, and then move to redux at that point. Oftentimes, components state is all you need, and if not you'll get a better appreciation for situations where redux helps.
It's days or maybe weeks (reading articles, watching videos/talks) that I'm trying to understand how to use Redux and redux-form correctly but it's really hard for me to fully grasp the concept. Maybe my usecase is not well suited for Redux or maybe I'm simply missing something obvious.
What I'm trying to find is a good foundation for a large application. I'm fairly convinced about React, but Redux (and in consequence, redux-form) seems like a good solution for a problem that I'm not having. Still, everybody praises the Redux (or flux) concept, so I want to make sure that I'm not missing something.
Well, the application is heavily database-driven with all data readily available in the browser (it's a offline-first application).
I'm using a in-browser database very similar to NeDB plus a Mongoose-like ODM, but actually the database is a(nother) custom project that I want to open-source once it is stable enough (I do have implemented it already and it works very good so far).
The key points of that database (relevant to this question) are probably that it has all data readily available in the browser and that it supports "live queries" - that means that I can subscribe to database changes and up-to-date query results are pushed directly to any consuming component/handler. Furthermore, the database automatically synchronizes all data with a server in background (two-way), meaning that collections may change contents in any moment.
As UI frontend I'm using Material UI.
The application itself will manage quite a number of different collections and I need to implement a number of forms for the user so that he can edit single documents in certain collections. Depending on the context in the application the user will see a list of all documents in the current collection and alongside a form showing the details of the currently selected document in that list. That form will of course also allow changes of the document. The user will probably only edit (see) one collection/form at a time.
See this quick Mockup for easier understanding:
The list on the left is ridiculously easy to do with React and the live queries described above. It's also "reactive" in that it is always in-sync with the database. However, it doesn't currently use Redux at all. I'm not sure if that's bad or not.
When clicking any item in that list, the details should show up in the form on the right.
I like the redux-form (v6) concept, but I can't figure out how to feed the document data to the form. I know there is initialValues but I could not understand how to use it properly.
I guess I need to push the document data somehow into Redux so that it is reflected in the form. Do I need to "start" a Redux action to push the data into the store?
On the other hand, using classic React state to pass the document (a simple JS object) from the list to my form component seems radically simple to me. At the moment I don't see any benefit from having a global form state in the Redux store. But then, I probably need something else than redux-form (couldn't find anything comparable).
Redux with my database seems also redundant to me since in the end both are global data stores.
I do use Redux already for a handful states that have nothing to do with database contents, like application status indicators and to toggle a global drawer. I'm also using redux-router (and ultimately would like to link the current list selection an unique URI). Yet I'm having a hard time to find a harmonic link between Redux and the database/database-related components.
So, my question in the end is: What's a reasonable way to implement these parts of the application? Redux or not Redux? In either case: how can it implemented?
If all your data is available more or less synchronously locally, Redux might not be that great a fit for your application.
However, if you want to use Redux Form, which provides a lot of form state management out of the box, you will need to use Redux, even if you only use it for the Redux Form reducer.
To initialize your form, you can either pass the values in via an initialValues prop to the decorated form component, or you may also call dispatch(initialize(formName, formValues)) yourself.
you can use the following package I've written:
https://www.npmjs.com/package/redux-offline-wizard
the base idea is to:
1) save redux to browser storage and rehydrate (reload from storage to redux store)
2) add a new branch to redux store to implement an outgoing queue for requests. any async XHR action will add a request to queue. Queue requests will be sent when user is online or comes back online and will be retried if failed because of network conditions
I have been reading about React and Redux lately. It looks very interesting and I'd like to use it for small personal projects. One question I keep coming back to is, when does data get saved to the database (or some sort of persistent storage)?
Most tutorials explain components, props, state but they I've not found a lot of solid information about saving said state to persistent storage. Some articles mention local storage but what happens when that is cleared? All the user's data is gone . . . ?
Eventually, a database has to be used at sometime, right?
I have been looking into Axios to help with the API backend. Is this a good option? Is there someway to save to local storage instead so the user sees the UI update instantly and silently call an API endpoint after the fact?
Open to ideas and suggestions. Thank you!
This really is a broad topic but you're right that the internet is lacking in examples of data persistence. One reason is that neither react nor redux are frameworks that help with these; meaning it's a great application of the libraries but are not core to the abstract ideas they present.
That's not to say it's undoable, quite the opposite. With the help of redux middleware this becomes a fun task that works flawlessly with the rest of your application. There are many different ways of implementing data persistence so I'll just explain one here, which I use in my own apps.
CouchDB + PouchDB + middleware
CouchDB: simple document storage in JSON format
PouchDB: syncs your localStorage with a CouchDB instance to automagically allow offline use
Since databases introduce stateful behavior, redux suggests using middleware to not muck up your store with state kept outside itself. In this middleware you would sync up your DB instance to the store. This middleware simply reads the data in the DB and fires actions to insert it into the store. Your application then fires actions that the middleware picks up and uses to store data in its DB. Finally, the DB updates the store with the new data it inserted/updated/deleted.
It's a simple yet powerful way to persist JSON serializable data to a DB while maintaining a redux store.
Use react-persistent-store-manager. Uses pull state and localforage for persistent data. It's quite straight forward.