I have a problem with reset redux store data. I have Register component when I click signup button then I get errors and record them in store, then I draw under the inputs.
Now, if I back to Login screen and then go back again to Register screen the errors still shown but I don't want to see them.
How I can solve this problem? I understand that I need to set initial state every time when I go to a screen. I tried to set initial state to createStore but it doesn't work. Also I use Redux Observable's Epics.
Related
I'm fairly new to AbortController and so far I've only used it in useEffect callbacks. However, I have a screen in my React Native app which allows the user to click a button to open a dialog; in the background the button click causes an axios call to the api, and then the retrieved information is shown in the dialog.
But what happens if the user clicks the button and then quickly navigates away? In this case, the information doesn't need to be retrieved, and it can't be displayed once it's been retrieved anyway.
Is there a way to handle this? ie can I set up an AbortController and then if the user navigates away from the screen, abort the signal so that the api call gets cancelled?
I don't know If I understand you correctly, but you can use useEffect cleanup function to cancel axios request. About cleanup function: https://dev.to/otamnitram/react-useeffect-cleanup-how-and-when-to-use-it-2hbm.
If you want you can prevent user to go back, until axios fetching is done-> https://reactnavigation.org/docs/preventing-going-back/
I'm new to Nuxt, but I have a bootstrap header with the standard v-if="authenticated" kinda state for login\logout buttons.
The auth provider is firebase which has a onAuthStateChanged method that I use to set (or reset) the user property in the state store.
So page loads, I see the login button, onAuthStateChanged runs, sets the user, then login disappears and logout button shows up (can see the Vuex events from base->set as well).
Question is, what am I doing fundamentally wrong such that I'm getting this flashing state. Is the only way to handle this to work with localStorage? ...should I NOT be storing the user in the state.store?
You need to save it in the store. But make no mistake because when reloading you have to set the token value using localstorage.
These are very good explanations
I'm new to React Native and have implemented a 'bodge' to get my app working but I wanted to know the correct way to implement the following...
The user has the option to log out on every page which currently calls a LOGOUT action which tells the reducers to revert back to initial states. It also sets the navigation reducer that I made to go to the 'login' screen. Once componentWillUpdate fires it sees this and then calls Actions.login(). This all works but is definitely not 'clean'.
Any advice on the correct implementation of this set state and redirect flow that I need?
I'm using the latest version of all of the libraries involved.
I want to make a desktop app in vue-electron. I am new to both vue.js and electron.
I am having some problems while managing state.
When I click on login button https://cloudup.com/cFl9MTY6cnn I send data i.e sessionId and username to next screen https://cloudup.com/c76fmL8OGbF and on this screen I display these props https://cloudup.com/csahnc6Z04J using this code https://cloudup.com/cdR0F6Qyt-3 but as I go to the third screen https://cloudup.com/c0F1ztX8qu3 and then come back then this data disappears https://cloudup.com/cTFW32DxeRa
I am going back to second screen using router.go(-1) https://cloudup.com/cvpxk4GsIRx
The vue-router documentation https://router.vuejs.org/en/essentials/navigation.html says that
“router.push method pushes a new entry into the history stack, so when the user clicks the browser back button they will be taken to the previous URL.”
and router.go(n) "This method takes a single integer as parameter that indicates by how many steps to go forwards or go backwards in the history stack"
However in my case, lifecycle hooks are called again when I go back to history stack. So does that mean when we come to previous page that component is created again and not popped from stack. I actually don’t want to refresh / reload the page on back button.
You need to send the data to the third screen,too.
Instead of
<route-link to="third_screen"></router-link>
You need to write,
<router-link :to="{ path: 'third_screen', params: { session_id: this.session_id, userName:this.user_name}}">User</router-link>
And instead of router.go(-1) you need to send the data as params again to your second screen using router.push() method.
But I won't suggest the above method as you need to pass the same data as params to all routes.
You should also have a look at Vuex.
Vuex is a state management pattern + library for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion.
You should store your Session Id as cookie instead of passing it as props.
Update
Also have a look at <keep-alive></keep-alive>.
Reference
Suppose I have two scenes or pages in react native.In first page,i have two buttons, i have one state variable whose value is initially set to false but when user click on first button that state variable value is change to 'true'.Then when user clicks on second button ,user gets navigated to second scene.After some interaction on second page or scene user again navigate to first page.When user navigate to first page state variable which was set to true again reset to false as page renders again. How should i maintain the state of variable and how to stop it from resetting to original value?????
You should probably look into a state management system like Redux.