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.
Related
I'm currently building an e-commerce react application, where users can sell pre owned stuff to each other. A typical workflow from a user perspective for creating and managing ads can look like this: A user creates an Ad -> The Ad is uploaded to a database -> The user fetches his ads from a database and views them in a list -> He decide to change something in an Ad, clicks it and gets a form with the ad data (fetched from database) that can be edited.
My problem here is that I'm really confused about what to keep in redux? The purpose of redux is to simplify data flow, data that is needed in multiple components should be stored there. But if I always fetch the data i need from database (as for example when a user fetch a list of his ads or the ad data that can be edited), isn't redux just an unnecessary step then?
I want to be consistent throughout my code about how I'm fetching data. Right now I've been using redux to store all my data fetched from database, keeping all my API calls in different actions. The data fetching however get really troublesome when it comes to fetching data from the database that then should be editable by the user. To make fetched data editable, it has to be stored in the components local state, so storing the data both in redux and local state feels very inconvenient.
I've searched the web for specific guidelines for the but I'm not getting any wiser. To be honest I don't think I've understood how to use redux properly. I would be really grateful for some advice on this matter.
Primarily its used for application state management. You need to consider your usecase and yourself simple questions i.e
Do you need that state for rest of the applications?
Will other components get affected by these states?
How often your data will
change?
Are there other users using the same data and can update it?
Do you need to cache the data to prevent refetching?
The view built on top of it is a reflection of that state, but does not have to exclusively use that state container for everything it does.
For example, in your case, you will need to keep your api's responses into redux state if you want to pass that state to other components and you dont want to do the same API call again and again.
But, if your data changes so often and you need refreshed data everytime you should not keep it in the redux. Otherwise you will end up having stale data on different screens.
Note :
There could also be other possibilities that can be consider but this is some very basic info that I thought will be useful for you to take a decision
I'm currently making a REACT web app, and I've made heavy use of localStorage to keep track of data without having to make more api calls, i'll provide a quick explanation of what i'm doing and would like to know if it's a good practice or if there's a better way.
I am working on a blog app and need to have access to some data in other components (such as the username of the currently connected user.)
So each time I make an api call, and receive data that I know I will need in other components (especially if it's not a child component of the one receiving the data), I store it in the localstorage so I can access it easily.
Is making use of the local storage everytime I need it for convenience good ?
Do you have any guidelines regarding when to query data instead of relying on localStorage ?
Thanks for your answer.
Remember that localstorage is persistent data. So it should be used for data that is required when the user leaves your app and comes back to it again.
On the other hand, sharing data between components while your app is running should be done with other mechanisms, typically passing props from a parent component to child components. Also, you can use React context or Redux or similar APIs to store data that is required globally while your app is running.
I would say "it depends"
If you are not accessing data in localStorage way too often, data inside of it are not changing frequently. Then it is OK. (still you need to have fallback for any other storage, try safari in anonymous window there localStorage does not work, old mobiles have limits how much data can be stored etc. etc.)
Otherwise it would be better use other means of storing data locally. Like IndexedDB, WebSQL. You can use some lib for managing those like for indexDB dexie, idb or any other.
If you are using localStorage just to ease your work with react props drilling, then rather use React.context, flux, redux... or any other state managment lib.
I feel this is a stupid question, but I am having a problem answering it myself, so I am relying on experienced programmers to help me with this.
I have a react app that is running on a laravel backend (php), and using redux for a presisted state for my app.
I essentially request all data that will be present on another page, and would like to know, if I should just use the data that I initially have in my redux store or just reload everything on a different page?
You should use the data in redux store. But persisted data can be altered, so in case you want to verify the data or something along the lines, you can just compare the data that is on the client side with that on the server. Otherwise, the very idea of redux is to use data in multiple pages (components)
Lets say we want to have one instance of the application and multiple tenants trying to access same features but also have some level of customisation and of course data isolation. In short Basic SaaS model.
Tenants will probably be identified by subdomain/domain and/or by querystring.
So the main question (which is rather specific):
What are common approaches onto implementing a multitenant environment using React + Redux ?
Thinking loud:
How to approach/structure the Application Store.
How to deal with tenant specific configurations
Do I need to have some sort of a TenantContext available somewhere at hand.
How to ensure proper level of isolation and avoid race conditions?
What else should be kept in mind while developing it?
Any thoughts, ideas, past experience, advice, are highly appreciated.
Thank you!
A typical Redux store usually only reflects persistent data, and contains application-specific data, like which tab is active or what is the value of that field. But in case of persistent data, that's an interesting question. I believe React and Redux are simply not for that. But even though, there's an interesting solution for that: Relay and subscriptions.
Relay connects your components to a GraphQL source of data (typically remote), and then you simply access props that are seamlessly injected into component and given values from the data storage. With subscriptions, any update in the data storage causes its delivery to a connected component via a subscription established between the app and the GraphQL server.
Now, you can add an extra layer for multitenancy and synchronize data between nodes on a lower level, completely unrelated to React. The only thing now is that you'll need to listen to every update and send subscription updates, and there's no nice "single-click" solution for that yet.
You can see this discussion to get an idea how you can update a subscription. Good thing is that, on the client-side, the app will simply react to updated props with a connected component being re-rendered with new props.
I'm not a frontend developer and have not used react or any flux implementations as I'm not sure if they will do what I want. I'm trying to wrap my head around how to use react to render backend changes that are external to the client, ie changes by another user. I see how react works to handle the view when the client takes an action, but I'd like to render changes from the server/other users without long polling (similar to how meteor works with two-way data binding).
My solution was to create a pub/sub system on the backend that will push changes to the clients if they're subscribed to the appropriate channel. This could be accomplished by analyzing database queries/backend actions and their resulting changes as is done with Asana's Luna. My friend told me that I can simply do this with only using an implementation of flux. If he's correct, I must be misunderstanding what flux actually does. To me, it seemed that it only reflects changes based on the actions of the 'current' client.
You are right. Flux is simply a way to manage application state in response to different actions. How you would trigger those actions is out of its concern. pub/sub server in this situation is a right way to go. You can take a look at Firebase - google non relational database that has lots of SDKs for different platforms and can notify client of changes done by other users. But anyway it works as a pub/sub server =)