I am using redux-persist in my React Native app.
What I am going to do is to clean redux store when logout from the app.
persistStore(
store,
{
whitelist: compact([
'appInfo'
]),
storage: AsyncStorage
},
);
I know redux persists only the states in whitelist.
Therefore, I want to call this function when I logout from the app to clean the previous users details from redux store.
Does anyone know how to do this?
Many thanks,
Can you add userDetails to whitelist key?
You don't need to call persistStore everytime you want to persist store locally. It is meant as one time setup call ideally right after you createStore using redux.
On logout you can trigger an action USER_LOGGED_OUT, handle that in your reducer to clear out userDetails key. It will automatically be persisted then.
Related
I'm not sure how to use onAuthStateChange and Context
I am populating user in context and then I check for user with:
import {useAuth} from '../contexts/auth';
const { usuario } = useAuth();
if(!user)....
I don't really understand how and why I should use onAuthStateChange.
The onAuthStateChanged allows you receive an even when the authentication state changes, for example the user logs in or out. You can subscribe to the event and handle rendering based on the authentication state. Essentially you use it to populate or depopulate the user in your context.
For an example from the documentation see here.
So I am working on my first React Native project and I am curious as to what the proper way to handle user data is. I have 3 different pages that are: HomePage, ProfilePage, ChatPage. When a user logs in it navigates them to the HomePage.
As of now, I have it to where when the HomePage loads it makes a backend call that retrieves all of the user data and sets it to some states.
Now when the user navigates to a new page like the ProfilePage none of the data is there anymore of course so do I have to make another backend call? So one backend call for each page? Im sure there has to be some way to only make the backend call once. Could I possibly set a global state of some sort? Should I save all the user data to AsyncStorage?
My current File structure is as follows:
App.js -> Contains my React Navigation stack
HomePage.js
ProfilePage.js
ChatPage.js
Thanks for the help!
You can use Redux plus React-Redux.
To say in short redux is a state management library for react. The states will be global to your app accessible across various components inside app. also there will be reactivity.
For more info visit this link
https://react-redux.js.org/
You should use React-Redux and manage your states globally.
I'm using Vue and Nuxt and want to pull data into my build that is mostly static. Each time we build the site, we want to get the latest data and then never call the API again. The data does not need to be updated dynamically, it just needs to be available for the app and can be built in.
One of the problems is that the call to get the API data is long (>5 seconds) and we don't want the customer waiting.
Our thinking was to
Call an API at some point in the build process to collect the data
Save the data in the store so other components can access it.
Not call the API to get the data again.
How might I do this? I really appreciate any help, I'm pretty new to Vue and especially Nuxt, but really enjoy both.
What I've tried
My understanding is that using fetch() in a component will call both on the server before the initial page is rendered and on the client some time after the component is mounted.
From the documentation on Nuxt
fetch is a hook called during server-side rendering after the
component instance is created, and on the client when navigating. The
fetch hook should return a promise (whether explicitly, or implicitly
using async/await) that will be resolved:
On the server before the initial page is rendered On the client some
time after the component is mounted
I've also tried this approach (and am currently using it) from Stackoverflow
export const actions = {
async nuxtServerInit ({ state }, { req }) {
let response = await axios.get("some/path/...");
state.data = response.data;
}
}
But there is a caveat in the answer:
nuxtServerInit will fire always on first page load no matter on what page you are. So you should navigate first to store/index.js.
Anyway, I could use a hand figuring out how to do this.
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.
My aplication has a login and it gets from the api a apikey when the user logged in that saves in the this.state. I need to be able to acces the apikey from every screen of the app. How can i do it? Thanks.
You have to use AsyncStorage
AsyncStorage is a simple, asynchronous, persistent, key-value
storage system that is global to the app. It should be used instead of
LocalStorage.