Please tell me if I am oversimplifying.
I have build a working React + Redux web app prototype, working theoretically as I would like using redux-persist and rehydrating from local storage each time.
I feel as though, given that this works perfectly, there should be some available middleware out there to sync my Redux store with Firebase (or some other tool).
All the tools out there seem to be exposing Firebase directly to me, whereas I feel that my Redux store should be able to act as an abstraction/caching layer over Firebase.
I have looked into all of the popular libraries (and many less popular), for example:
https://github.com/prescottprue/react-redux-firebase
This guy seems to have the same idea:
https://medium.com/#david.gilbertson/react-and-firebase-sittin-in-a-tree-a00d481786cb
Any guidance or am I totally going down the wrong track? My expectation would be to never have to directly reference a Firebase Ref in my main code and to not change what I already have.
Related
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.
I've been working with react from past 1.5 years. When I came across redux it's good library for state management of an app but when it comes to local storage I think it's good to store user session because redux store will change because of page refresh. So I'm little bit confused what to do with redux also it's little complex writing code. Can somebody help me which is better to use for storing user session? Thank you :)
The purpose of Redux (or any other state management tool for SPAs) is to help you manage your app's state when the app is loaded in the browser. You can't "keep it" after you close the app. Use JWT or cookies for storing info about user sessions in the browser.
Also, you don't have to use Redux for your state management if you find it too complex. React's Context Api may be sufficient. But again, not for storing user sessions.
I'm wondering whether it's possible to have changes in a Firestore DB automatically reflected in a React app. That is -- if I have the correct terminology -- whether I can bind the two together, with the Firestore DB acting as a model and the React app acting as the view.
Failing using something like WebSockets, I can't think of a way that doesn't involve some sort of polling.
I did come across react-redux-firebase, which allows to connect Firestore to Redux. But on a first glance, I can't tell whether this means that changes in Firestore are automatically transmitted to Redux, that is whether react-redux-firebase does some sort of polling, etc, on its own. Or whether you have to query the Firestore data yourself.
(Full disclosure: reflecting changes in React from a Firestore DB is a small part of a coding challenge I'm working on, but I figure it's fair game to ask on Stack Overflow to see if I'm heading down a viable path, since this is what I'd do in 'real life' in any case. I suspect I'll need to do the polling myself, but wanted to see if there were any library, like react-redux-firebase, that would 'push' the data from Firestore to React/Redux automatically).
I've been using Redux for months now and I realized that using Redux actually slows down my dev speed a lot (sorry that the title is provocative). I separated the backend and frontend completely into two repos. I use Rails on the backend and Redux on the frontend.
It feels very nice to be following the modern ES6 trend with React, Redux, and Babel. But these two things bother me:
You have to write a LOT of code just to get CRUD right. Getting the loading state right, making sure that the frontend and backend data are always in sync, etc. is more hassle than you might imagine.
You have to worry about SSR, which is not all that simple.
So I went ahead and re-wrote my app in Rails and React without using Redux. Basically, I just used React to draw presentational components, and Rails controllers replaced Redux's smart containers. Then, I could implement the same functionality twice as fast.
When should I actually use Redux? Am I doing something wrong?
The major benefit of Redux is the single source of truth for your application's data, paired with powerful features like middlewares (super useful for tracking things like telemetry.)
From a usage POV it's not much more complicated than any other Flux implementation, but you gain the benefit of access to all state all the time instead of cobbling together pubsub subscriptions to a bunch of stores.
I've been using it for about 8 months now and have few complaints.
When I started using React Native I didn't use redux, I was spending a lot of time sending data from one component to another, from one module to another and the code was getting ugly as my application started growing, until I integrated redux.
Redux allows you to share data across all your application with easy, allowing you to change the global state with a simple action call from your components.
I use Rails as well for the backend but only to save and get data. I have a JSON API that I use from the mobile app (React Native) and from a web app that I have in AngularJS.
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.