Lets say we have a basic shopping app with a shopping cart, whenever the user adds an item to the cart a request is sent to the backend in order to persist the shopping cart.
I am contemplating between two approches to this achive this.
The client sends the updated shopping cart and awaits a response from the backend, only after the requests completes the shopping cart is updated to reflect the change, if the request fails an error is shown instead.
When the shopping cart is updated on the client the change is reflected immediately, then if the request failed an error is shown and the state reverts to before the request.
The advantage of the second method is that the changes are instantaneous while the first method has a response time, but the second method might confuse users in the case that a request fails.
I am wondering which method is better, or if there is a better way to go about this?
Is there an industry standard for this problem?
Note: I am working with react / nodejs backend in case this is relevent.
I'm building site using woocommerce as backend and react as UI but i'm not finding any solution to store cart items for logged in users. Is there any API or can any custom API endpoint can be created to store this? Also, for cart functionality i've use react-use-cart hooks to store state of cart and all the cart information is stored in localstorage.
I am new to React and Redux, and currently I am building a very simple eCommerce app for practice. This app is retrieving its data from https://fakestoreapi.com/docs . I am a little confused about the best way to go about organizing what to call from my Redux state vs from the API...
Should I be calling the API once upon App.js render to fetch all products, and then storing the fetched products (along with all their data like descr, price, image etc) in my Redux state? Then when viewing the Product List page, or a Single Product page, I would pull the data directly from the Redux state?
Or, should I not be storing any product data in Redux state, and instead be calling the API each time I render the Product List page and a Single Product page?
Also, regarding the Cart state, for each item in the cart, should I be storing all the details (i.e. title, descr, price, image etc) in the Redux state? Then when rendering the Cart page, I would just be pulling those details from Redux?
Or, should I be just storing the product IDs and quantities in my Redux state? Then when viewing the Cart page, I would fetch the product details from the API for each item in the Cart?
In my mind, I can see pros and cons for both approaches, but I was wondering if there are some best practices, or recommendations on what should be considered when trying to choose the ideal approach?
Thank you!
It can be bit confusing but You have to change the way you look at your Global State.
For State : We can store User's Data, his actions, theme settings and others in State. As these are user information which we don't want to fetch multiple time during his session.
You can also store response from API into State. So that you can better handle it and If you think data is not going to change for that certain user. then you Use your Global State instead of making an API Call.
If Your actions makes data change than do an API Call.
In Case of Cart. You should Store that data in your state. As you wouldn't want to make multiple request to your API. Saving that data in State would be helpful in better UX, and will save cost of lots of API Calls
I have a cart in django that uses session to track the user. The cart is created when the user adds an item to cart, also checks if the cart existed by session id. But when I run an add to cart mutation in react, Django creates a new cart every time.
I was using react-redux/redux-persist to persist the cart data but whenever I tried to update and reload my webpage the cart returns to the version of data it was since persisted.
When you refresh the page redux data will be cleared.