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.
Related
i am trying to conditionally render authenticated and unauthenticated screens based on "isAuthenticated" state redux value (trying to achieve exactly as mentioned in this link:
https://reactnavigation.org/docs/auth-flow/?fbclid=IwAR3Wj664kuFR32LJ4CjCkofyv3L1cjDRIc-JFbNICddY6JLqgX-wdGiG8Ls
Current flow of my app is:
User sees unauthenticated link (signup page),
Once user signs up "isAuthenticated" redux state value is changed to true from false and token is locally saved using AsyncStorage
Every time app is closed and reopened, action is used to read local data and isAuthenticated is set to true.
Problem:
Every time app is opened for split second non authenticated screen is shown and then authenticated screen is shown.
Desired result:
Either Authenticated screen or non authenticated screen should be shown, according to isAuthenticated boolean value.
Cause of Problem identified:
As "isAuthenticated" default value is set to false, every time app starts, for split second isAuthenticated will be false and non authenticated screen will be shown for few second.
During that same time, local AsyncStorage data is read and redux state value is changed to true, that results in another re-renders and shows authenticated screen.
As isAuthenticated has both false and true value during re opening of app, any suggestion to solve this would be greatly appreciated.
As "isAuthenticated" default value is set to false, every time app starts, for split second isAuthenticated will be false and non authenticated screen will be shown for few second.
The problem is that this cannot be represented in true and false, since there are actually 3 states:
checking
checked, logged in
checked, not logged in
The easiest way would be to add another state property "checkingAuthentication" or whatever you prefer, and show a splash screen until you finish checking. The example in docs do this with a isLoading state.
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.
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
on my single page app i have a page that the user have a select box and the data can changed according to the option the user selected.
when the data changed, i'm pushing a new state to the history
History.pushState({'id':params.id}, 'activity', '?activity');
the push works fine, the problem is when i hit 'back' the history detect that the previous state is the same ('activity') so the back doesn't work. but the data is different and i want the plugin to reload the same page but with the previous data.
I found the problem. This wasn't an issue about same state. I forgot to add preventDefault to the link that change the state.
In my Durandal app, I have a search page - I'd like to:
Load a clean search page when it's loaded from the menu (router.navigate('#/search'))
When navigating to an item from the search page, then using the back button, this should return to the original search result & criteria.
I'm also storing my search criteria & results as a (app-wide) singleton, which is injected to the view model via RequireJS.
Am I able to: distinguish how the user entered the page? I can see that the activate() lifecycle call is triggered under both entry methods.
If you want to know if the user landed to the search page by clicking a link/button from your app or by visiting by entering a url/back button, what I would do is to raise an event when the user clicks on the link/button and on the search page check if the event has been raised or pass some parameter in router.navigate.
I have been recently doing some work on distinguishing a user click from within the application and a back or forward button from the browser. If you are using router.navigate() to navigate around the Durandal application the router.explicitNavigation flag is set to true. But you would want to capture this before the 'router:navigation:complete' event in 'router:route:activating' event as the flag gets set back to false on 'router:navigation:complete' event.
Bottom line is if you are using router.navigate to navigate around the application the router.explicitNavigation property will be set to true and if navigation is triggered using the back/forward button in the browser router.explicitNavigation will be set to false.
In actual case you might not even need to perform router.navigate() to distinguish between an in app navigation and a browser back/forward because Durandal's router module listens to all 'a' tag click on the document level and sets the explicitNavigation flag to true. However I haven't tested this fully.