Search code examples
javascriptmongodbredux

What can I do to keep the data updated on a Redux storage? (MERN STACK)


I'm developing an ecommerce app using MERN Stack. I was trying to find the best way I could to store products in a cart storage using Redux, but if I'm going to just store the products informations it can get outdated from time to time or even informations being changed by the user ( since it's redux, user can edit all the informations inside that cart storage I think ).

Like, if I store a certain price now It can be not the same in the future. What can I do to make these informations all up to date? I thought on storing only products ids in the cart and fetching the informations when needed, but I don't know if this is the right way as it could use alot of the database if the cart is too big. Any suggestion is welcome!


Solution

  • Check out https://redux-toolkit.js.org/rtk-query/overview

    Like, if I store a certain price now It can be not the same in the future. What can I do to make these informations all up to date?

    When a price changes in the source of truth (server side), you can either use a technology like web sockets that pushes updates immediately to your client app, or you periodically check for updates on the client side.

    What worked well for me in redux apps is to embrace the store as a cache (for example keep all product details in the store that the user looked at), but then when you're rendering product details, always also fetch it from the server, since the price could have changed. This way the app feels snappy and responsive. Showing an outdated price is also not as bad as you think. Usually the user navigates to a different page/screen where the cart content is validated again, and they will find out that the price has changed.

    In a nutshell: embrace caching, but always re-fetch resources when they are presented to the user.