How to serialize and restore vuex store state? - javascript

I´m using vuex for a very simple single purpose application. I would like to include a functionality that enables users to get a string(/url) that they can save to later recreate the store state.
For this, I thought it would be the easiest way to just dump the store state and later reinitialize the app with this dump.
Any idea how to achieve this?
I looked into the existing vuex persistence libraries but they seem to be overkill for what I´m aiming for. Simplicity beats sophistication in this scenario.
vuex persistance libraries I looked at
https://github.com/robinvdvleuten/vuex-persistedstate
https://github.com/championswimmer/vuex-persist

I got an answer in the Vue Discord chat:
"just JSON.stringify it"
Example: https://github.com/devCrossNet/chaptr/blob/master/src/app/home/Home/Home.vue#L118
Works like a charm.

Related

Is it ok to use localStorage instead of Redux or Context API?

I've been working with React for a little while, and after some time i started to ask myself, why not store every piece of data that my components need to share in localstorage instead of using Redux. Redux need so much boilerplate while localstorage is so simple. You can say that you cant storage object in localstorage but you can JSON.stringfy them, and on recovery just parse them back. So problaby there's something that i cant see properly about that, cause Redux is largely used and localstorage is normally used just to save data you dont wish to loss on refresh and things like that.
This question was on my head when I started developing react apps.
There are many reasons than below to use redux over localStorage.
but at least
Using Redux alongside react-redux is not only for store data. don't forget that changing in a state will reRender All components that listen to that state. and that is really what react-redux does.
stringify/parse from localStorage will make your app (on high-scale) slower and also will not sync all components while changing state.
Personal Recommendation After more than 4 years of developing React Apps, use REDUX with easy API like redux-toolkit or rematch
Redux and localStorage have different use cases actually. Redux you'll use to manage your application state across multiple components.
Local Storage you'll use to persist properties in the browser for later usage. The problem is that any change on your localStorage won't reflect on your application. You'll have to do it manually.
The purpose of react-redux is to allow other components to connect to state and then react on changes. You are loosing the whole scope of using react-redux/context api.
The answer is in your question, yes local storage is only used for storing data in the browser while redux and context api solve some different problem. It separates your data layer from your view to easily manage your data state. If the app is not really big then you should consider going with Context API.
You can read this article for more info.
Note, stringifying and parsing itself is a pretty heavy operations for larger datasets.
It's probably OK to use localstorage instead of Redux. It's possible to have changes in localstorage have immediate effect on subscribed react components.
The people at marmelab who built react-admin transitioned from using redux to what they call The Store.
React-admin contains a global, synchronous, persistent store for
storing user preferences. Think of the Store as a key-value database
that persists between page loads.
The store uses the browser local storage (or a memory storage when
localStorage isn’t available). The store is emptied when the user logs
out.
When using react-admin changes in localstorage have immediate effect on subscribed react components. Checkout the readme and try the demo. Do some fiddling with data in localstorage manually, and see how react components rerender. I was amazed when I saw that for the first time.
I think it's ok. It depends on your requirement. In our situation, we need to split a big project into several small projects, whether use Redux or Mobx both cause problem very difficult, so we totally remove Redux and Mobx, just use LocalStorage to save all states. We know it will be slow and cannot rerender when state changes, but we want to accept it, and even add a Refresh button on some page if need to get state from local storage. So the answer is: it's ok to totally remove Redux, just see if you want to accept it or not.
Why use Redux instead of localStorage:
Disk space: You will probably not be deleting data from local storage every time the user quits your website. (you could with onbeforeonunload event enter link description here but it doesn't look like a good pracitce).
Security: If you are saving user's data, you would have to be careful on not mixing users data saved on localStorage.
Why not use Redux instead of localStorage:
"update the state": The truth is that you can listen to changes on localStorage and then change the state. So, I think, this is not a good reason. For example:
window.addEventListener('storage', (event) => { setState("changed")});
Simplicity: as Zhang Buzz, redux can be a pain.
Each case is different and you'll needs to weight the pros and cons to make a good decision.

When to use vuex to store data instead of local component data?

I'm working on a large project built with vue. We are using vuex as the state management system but their are some components where I don't need to access their data anywhere else. So, Is it right to store this data in the component data or stick with the convention and store it in a vuex module.
Thanks in advance.
You need to use Vuex store if the data must be accessible by multiple (independent) components. There are several reasons why you shouldn't store everything in Vuex store.
First things first complexity! If you are building a complex Vuex store you can not use effectively as your project grows.
On the other hand if you're filling your store with unnecessary states, all the states will executed in the first load in the initial JS and the more data will increase the payloads and that occurs longer load of the webapp.
So the best thing what you can do it is keep your local states locally until is it possible, und use Vuex when the communication of independent components is needed.
You can keep data with in your components. You can convert your non data sharing components to Functional Components link here.
Vue process functional components faster than normal one. By converting to functional one you will gain some performance boost.
It is totally fine to keep data with in the components if you don't need to access it globally.
When you create more than one Function Components, You must create keys for them too. You can find the whole conversation here. I gave all the details there with code samples as well.
ENJOY CODING....

How & when to best modularise Components with & without Redux?

Say I want to create a little editor for my software that helps me organise people in my company. I will use React & Redux. The editor is a React component (or maybe container?), and it shows me one person at a time. I can edit things about this person, delete fields, etc. and when I am ready I can click a button which will then give me the next person to edit.
Now, I am quite new to React still and can imagine doing this in 2 ways:
Solution 1: Decouple the editor component
Create an Editor Component, which takes an array of all the people in my company. I do have these people saved in the Redux state of my app, but the editor component will not work on my Redux state, but do all changes in its internal state first, and only once I click save will the Editor component commit these changes to my Redux state. This might be a problem, and changes could get lost if somebody doesn't save their edits.
The advantage here is that I have my Editor de-coupled from the rest of my App, and the logic of the Editor will stay in that component.
Solution 2: Connect the Editor Component to Redux
Here, I would connect my Editor component to Redux. So I would not give my component the people array, but direct access to the my Redux store via selectors (for example). I would also not have a deletePerson() function internal to my component, but pass this down as a prop into my component (and it would presumably be a Redux action). This way my component would work directly on state, which I can see as having advantages.
But taking it out of this app and reusing it somewhere else would get more and more difficult, the more complex my component becomes.
Please remember that I am a beginner and that these two solutions are what I came up with as a response to a problem I am facing in my own application. However, I would appreciate if you could help me out here, and explain to me how I should think about problems like this. Is there maybe a third solution I am not mentioning? Or am I misunderstanding a concept?
Personally, I am inclined to go with Solution No. 1, but I also know that the whole idea of Redux is to keep state in one place. What would you advise? Are there performance differences / advantages with one solution?
Your first solution is good but why not use a service when its provided?
You should try to mix up features of Redux React. First, separate your presentational and container components and in one of your container component pass the props directly to redux store on click,etc. Then use redux actions to access the store like deleting,etc. Provide a UI using React presentational components for data entry and pass this data to redux store. Use redux actions when you think they will be useful and not destructure your app.
Go to https://medium.com/#dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0 for further details on how to connect presentational and container components.

State container(like Redux) in angularjs?

I'm working in a big project which we develop a Dashboard that display the user lots of data in different ways, charts tables and more.
The user has the power to filter the data, add filter expressions, filter data from table and mutate it.
Sometimes i feel really like i need a state container that will manage all of this data because it really gets hard for me to debug a problem or adding a new feature.
I would like your advice about what state container to use with angularjs (1.4.8)?
And what are the best ways to implement it on a big written project?
I have worked on similar kind of work on which you are working on. I made a dashboard, which shows a lot of data using different plots( line, volcano, bar, heatmaps) and there was a way to interact all of them and filtering data and all.
For that purpose, I used angular-redux. Its very nice as at each interaction you can get your complete state object. That is managable and makes debugging very easier.
For that I followed angular-redux doc to make its configuration. Also, there is one chrome extension redux-devtools, which shows all of your actions and state after each action. That helps you to keep tract on your state model.
If you want more info on redux, there are some good doc, which you can read.
redux-basics(1) redux-basics(2)
By looking at your need, I would recommend you to use redux.
Hopefully this will be helpful for u. If you need any other info, Let me know

How to store something in JavaScript temporarily?

I am trying to create blackjack with JS and React.
So far I have got most of it working but my main problem is that everytime react renders it changes the cards and the order of the deck etc. I just need a simple way to store data and so even when react re renders it keeps the order of the deck (array of objects). I am use to firebase but that seems quite heavy for something like this. any ideas? i saw local storage might be an option too but wanted peoples opinions.

Categories