I'm using redux to load data from the backend in a react application. I'm loading a bunch of data with axios and then I can select one item and see the specific information in a different view. I'm rendering a "Loading" view every time I do a search in the backend. The problem is: this search is fine whenever I load the view refreshing the browser. But when I'm navigating in the own app, I use react-router-dom and I don't need to show the loading screen because it is already in the redux store.
Is there a way to tell redux or react to not make the async call if I already have the data?
Is redux-persist a solution for this? Should I do it manually with a condition in react?
I make the call in the componentDidMount method
You should pass the data from redux store down to your component as a property and you should make a check in componentDidMount or before that if data is empty or null or whatever and make a decision if you should load it after that. You don't need any 3rd party lib for data persistence (like redux-persist) since you actually have it in your redux store already persisted.
Related
I was using react redux but, when I refresh the data was deleted, so now I am planning to use react redux persist to keep data stored.
I would recommend you to use backend instead of handling this thing using react, what I am trying to say is make one api in backend which will provide you the data of the user which is currently logged in using the auth token which you will pass in the header and call that API first whenever the page is refreshed and directly store the response into your redux this way even on refresh your data will not vanish away.
For a project I'm working on we use the AG-Grid with the data loaded from a server.
Users will have the option to upload files and those files will be displayed on the grid immediately after starting the upload (with an uploading status).
The goal is to refresh the grid after an upload is done, so when our React Redux asyncThunk function succeeds. This because that way we update the grid when an uploading status has changed, so that the user does not have to refresh the browser to see the latest updates of his upload.
What is the problem?
We currently use an AG-Grid api reference in our other components to trigger similar AG-Grid actions (such as a reload).
But, we cannot pass that reference through to our React Redux slice, as you cannot have a non-serializable value in there.
Possible solutions?
Is there a way you can pass a reference of the AG-Grid api throug to a React Redux slice to trigger actions in an asyncThunk (https://redux-toolkit.js.org/api/createAsyncThunk)?
Is there a way to use that reference in a file where we export a function that would trigger an action of that AG-Grid api reference? So this could be called in the asyncThunk.
If there is another way this might be possible, please let me know.
Thanks.
When the upload is complete, you can dispatch an action through thunk that adds this information to the redux state (like in the form of state.uploadStatus = 'uploaded'). Access this uploadStatus in the component where you have AG-Grid api reference using useSelector. Then, you can track changes in the uploadStatus in a useEffect hook, and trigger grid refresh acccordingly.
const uploadStatus = useSelector(uploadStatusSelector)
useEffect (()=> {
refreshGrid()
}, [uploadStatus]);
If you are uploading multiple files and need to refresh the grid every time any of those files is uploaded, then set uploadStatus to be an array and push something like fileId into the array when any of those files is uploaded successfully.
I want to use Redux Toolkit, but have global state properties that are not specific to a particular feature, such as "loading" and "errors". These two properties are updated when I make API requests concerning multiple features in my app. Should I put them in their own e.g. API reducer? Thanks
It is always better to have separate loading, errors for each api call or each component reducer.
you can think this way, what component is visible to the user at that moment and you want to show loading till the data comes from backend.
You only keep any state global and share when it will be used in another component.
Imagine a React app where you can list your friends in a sidebar. The site uses Redux to store the state of the friends. In case a user adds a new friend to his list, I have to send a POST to the backend, to save it.
The question is, how should I update the list of friends in the sidebar?
After the post, should I make a GET request and add the response to Redux or should I just use the data and add it directly to Redux, removing the extra GET call?
My suggestion will be doing both. When you are making a request to server update the Redux store which will update your state(Friends list) and will rerender the component.
Also fire the GET request action, so that if there are data that are on the server but not in your redux, that should get retrieved.
(imagine: Using two machine at the same time and adding friends)
And if you are using something similar to a pure component, if your redux store and retrieved data are same, i.e., no new data was available on the server, there will be no change in state and component will not re-render. They will re-render only when there is a difference in state and will display the current list.
IMO both options are valid. However, I like to have a single source of truth in our applications, which is the backend in most cases.
Sometimes, you might even choose to go for both options. This will increase the user experience by preventing a loading state, but if the action fails or the backend data is different than your redux store, it can result in "weird" behavior.
I want to fetch all the data needed to display the dashboard of my app in react-native. The app is similar to the facebook one
I am using react-native, redux, redux-saga, react-navigation and a REST api.
I have to fetch the post list to display the main page and the notification count for the headerBar. The other tabs pages are mounted at the same time as the main one to allow fluid transition. So I need the current user too for the Account page
Finally, the store is persisted and the app can stay in background mode for a long time. So I need to refresh my data often to be sure to have the last changes.
I have sagas which make the call and launch actions to update the store.
Here the strategies I found :
I can connect each page component and give them a fetchAllPageData() which dispatch a fetch action that I call in componentDidMount
I can connect smaller components to allow them to pull the data they need with the same strategy (ie. fetchUser to the component that display the user in the Account Page, fetchNotificationCount to the component that display the number of notifications ...)
I can use create a redux-middleware which listen for page change and call all fetch data actions.
I am currently using a mix of the first and second solutions but I am not very happy with it :
I don't always know where the data are fetched
The strategies which refresh the data once the component is mounted are a bit "hacky" and random
I often have the to move where the call is done when refactoring
What is the state of the art on this subject? What is your recommendation?
The usual recommendation is to intercept actions that make AJAX requests in the middleware and resolve them there before passing the result through.
This article explains it in more depth.
You can / should do in componentDidMount or componentWillMount.