I got confused with the right data flow when I have a backend API and a redux state that passing the data to the components.
The question is: What is the right methodology to handle 2 data resources, API and Redux?
should I update the state and then fire a send request to the API with the update?
or, let the redux send that request for me every time the state changes?
or, should I update the API directly and then fire a get request to update the Redux store?
I’m really confused and do not know what is right approach should I take with less error in the future use
Appreciate any help, even sending me an article that talks about this issue and I’m gonna read it
Thank you
>Solution :
should I update the state and then fire a send request to the API with the update?
That’s called "optimistic update", the advantage is that your app feels fast and responsive, since the network delay is hidden from the user. The downside is that the request might fail and you have to undo what the user did and inform them that it failed. For simple operations (for example marking a product as a favorite in an ecommerce website) this works great in my opinion.
To explain how it works with the example in mind:
- User action triggers update of redux state (product is immediately shown as favourite on the page)
- At the same time, an API request is fired to favourite the product on the backend side.
- You fetch the product data again from the API and render it
- Now either the request has successfully changed the product, so visually nothing changes on the page for the user – to them it looks like the operation happened without network delay – Or the request failed and you show the old state where the product is not a favourite and and error message appears.
or, let the redux send that request for me every time the state changes?
Parts of redux-toolkit embrace this approach if I’m not mistaken. If you decide to go down this road, I’d recommend to not implement it yourself but instead rely on existing libraries/middlewares.
or, should I update the API directly and then fire a get request to update the Redux store?
This is the classic, safe, and simple approach.
My advice is:
- If you have lots and lots of CRUD operations against your API, and you want to not write lots of boilerplate code, look into redux-toolkit (specifically https://redux-toolkit.js.org/rtk-query/overview ).
- If you care about perceived performance of your app, try optimistic update.
- If you want to keep it simple and just get things to work, follow the classic approach.