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
Related
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.
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 created a screen that has a flat list with a data source from an external API. I am storing those data in a state, using redux and then retrieving the data to flatlist.
I am for fetching the data from API I am using axios. So, to supply the source of data to flatlist, I am fetching the data in the previous screen. For example - I have a button, by which on pressing that button it will navigate to a new screen which contains a flatlist. So, I am fetching the data by posting axios request by the onPress function of the button from the previous page. And then storing that data to a state in the redux store, and then getting the data as a source to flat list.
I think this is not the right way to do this? How to fetch the data from external API on the same component and how to render that (because within fetching the data, the component will be rendered). How to do this effectively?
As, if everything is correct if the user goes to some other screen and re-enters the screen what will happen? How to do this effectively and optimized?
I think I don't have any code to show. If you guys need any code from above said, do let me know will update them.
You should probably try using componentDidMount for calling your api.
componentDidMount is invoked only once, immediately after the initial rendering occur.
You mentioned you are storing data in your redux store.
You should probably create events like:
const Actions = {
LOAD_POSTS_REQUEST: 'LOAD_POSTS_REQUEST',
LOAD_POSTS_FAILURE: 'LOAD_POSTS_FAILURE',
LOAD_POSTS_SUCCESS: 'LOAD_POSTS_SUCCESS',
};
const postReducer = {
posts: [],
isLoaded: false
};
Now, on LOAD_POSTS_SUCCESS you can set your data which you need in the flatlist with that also set a isLoaded state in the redux store.
Now next time, when user re-enters the screen you can use the state.isLoaded check to call the api.
I am sure that what I am mentioning here is a way simple implementation. Hope this helps.
I need to update data every minute and on some specific events.
My idea is to create an action in ApplicationRoute, that would find the current router and evoke the model() method again.
But how can I access other routes from ApplicationRoute?
Maybe there are any other ideas to make it?
You don't have to reenvoke the model hook.
The matter is that most store data retrieval methods, for example, store.findAll() (ex store.find()) return live arrays. A live array will automatically update its content whenever new records appear in the store or existing records are removed.
So all you need is to repopulate the store.
A good place to periodically fetch the data is a service.
Also, you can enable/disable periodic data retrieval from within routes. Simply create a mixin that would enable data retrieval in the service when the route is visited and disable when the route is left.