I am trying to develop a shopping cart with nuxt js. I am successfully storing the cart data in local storage but I am unable to retrieve the data.
N.B: i don't wanna use vuex-persistedstate.
I see lots of small problems with this.
First of all, it looks like you've put addToCart and saveInLocalStorage judging by the fact you are committing saveInLocalStorage.
Mutations should only be used to set the state of a single Vuex variable.
They should be pure, meaning they should not have side effects.
You need to use an action for saveInLocalStorage, and an action to commit the addToCart mutation before using dispatch to run the saveInLocalStorage action.
Secondly, it's unclear where you're actually running this get from local storage function. Are you running it top level of the Vuex store?
If so, to solve the actual problem of it not updating the Vuex store, you will want to have the function responsible for getting the value of storedCart and using it to set cart as a mutation to ensure the Vuex store actually updates.
Lastly, there's no need to use a ternary here. Simply set the Vuex cart object to be an empty array.
Related
I build a project in React using Redux and Router and I have a little question. If I navigate between project pages by clicking buttons, my state from Redux is not deleted.
But if I try to write the url instead of clicking the button to go to the same page, my state is deleted.
How can I resolve this problem?
Your redux store gets deleted because you have refreshed the page and no data related to the main page is present in the redux now ,
If you want to retain data inside redux even when you type url in browser without clicking any button , just use localstorage along with redux , and apply a check if your localstorage is present then store all the data inside redux else store data from redux to local storage .
I hope this solves your issue .
Building a simple E-commerce store with Nuxt and Prismic.
I have this very simple action in my store:
async GET_ALL_CATEGORIES({commit}) {
// gets all the categories from prismic
// Set categories to the state
}
My question is, when I move around the application from / to /category1 to /category1/product1 should I be dispatching this action everytime?
Would one save this array of categories in localStorage?
Should I have an if block in my asyncData that checks for the categories state and if it is empty, dispatch the action, otherwise use whats in state?
How do the pros handle this situation?
Thank you!
It depends on how often you think your 'categories from prismic' would change. If not very often then you can save it to the store and then just read from the store.
Otherwise you may want to query your API etc on every page load, probably in mounted()
EDIT: You many also want to set an expiry date on the state so that it can pull in fresh data at intervals
I am working on online shop. I have an order reducer, where I can hold my order. After page refreshing my store becomes empty (which is obvious). The main idea is to have my order saved for some period of time (e.g, 20 mins). Also, I want to save only piece of my store (order state). So, I decided to persist my state to localstorage
But here is a trick. How to do it correctly from architecture and patterns side? I have a few ideas:
Subscribe to my store using store.subscribe() and rewrite my localstorage on every store change. It will be a bit strange, because I need to parse my store using, take a piece of it and push to localstorage. Also, my callback will be called on every change, it may affect productivity.
Do it right in the dispatcher (this is an anti-pattern I suppose):
const addToOrder = orderItem => ({
type: actionTypes.ADD_TO_ORDER,
payload: orderItem
});
export const addItemToOrder = orderItem => dispatch => {
// localstorage.setItem() ...
dispatch(addToOrder(orderItem));
}
Use libraries like
https://www.npmjs.com/package/redux-persist
https://www.npmjs.com/package/redux-localstorage
https://www.npmjs.com/package/redux-localstorage-simple
But in this case, how to clear my localstorage in 20 minutes after closing tab?
So, how to persist my state correctly and how to clear localstorage ins some time?
Thank you in advance for your help!
All ways are possible. Second also, as you use action creator to do additional work. For example action creators are used for data fetching, so storing data to localStore is not a problem.
I suggest to use option 3. It provides best separation of concerns. Code for storing data is located in single place and to spread over several action creators.
Unfortunately, you'll not be able to set expiration time for localStore items. But as localStore is accessed only by your app, you may leave items forever, but adding storage date/time. And during app start next time just check time and if data more than 20 min old, purge it. You can do this check in config.merge function.
In a React-Redux application I need to store the current url for future reference - After the url has changed, depending on the previous url query I'll take different actions, but this info does't affect the UI directly. The thing is, React state should store only UI related state, as any change will trigger rendering. I guess the same principle should be the case with Redux's state as well? I guess only state properties which will be passed to components via the connected components will trigger rerendering, but still I'm not sure Reudx store is the place to store such info, since this data is watched and that is unnecesary. Can I just store it in a global object I create for this purpose?
It is easy and convenient to store such thing into browser's localStorage (or sessionStorage). Ofc this will persist such data until storage is cleared (or the session ended).
You could put it in the redux state. As long as the corresponding state is not being used by any component a re-render should not be triggered (as the component state is not changing).
Other option as mentioned by someone already is to put it into localStorage.
I have data coming to the app from a Rails API and I have control over the shape of the JSON object that is sent. When a Redux action is dispatched, the data received is normalized on the front end before being sent to the store.
-simple enough-
What I am hoping to do is pass to the component that dispatches the acton a copy of the JSON data in its original, non-normalized form as props. This will save the 'de-normalization' process of taking that data from state and getting it into a form that is more useable for rendering in the component.
Any ideas on how/ where this can best be done?
Thanks!
FYI: This is a solution to an issue with relational data in normalized state that I have been trying to figure out.
A possible (straightforward) solution would be storing the 'de-normalization' version in a dedicated property in the store, your component or other part of your app could take it directly access it from there.
You can store this 'de-normalization' version directly in the reducer after the appropriate action was dispatched.