I am working on a react-native app, using also redux-toolkit.
after dispatching an action i thought that the store updates automatically - so i sent the store as a parameter for the next function (next in line)
sadly the store didn't updated , though i can see the changes in other componenets
i was expecting to automatically get the updated store (when using
const store = useSelector(state => state.root.playersSlice.players);
)
having someFunc(store) didn't retrieved the updated store
Related
I have call API to get settings data on main.ts file and set that data on store using vuex.
Now I am using the same setting data on my each pages(components)
My issue is when we refresh the page, Latest setting data is stored on vuex store but sometime on mozila firefox my main component is called before the set the setting data on vuex store such that I diden't received the valid setting data.
This issue occured only on firefox. I have used the async and await as well.
I have already set the async await on the API using axios
I have a vue3/firestore app. I am trying to make 1 call to firestore to get the users notifications, its conditional if there is a user signed in or not:
let { documents: notifications } = user.value && user.value.displayName ? getCollection('profiles', null, user.value.displayName, 'notifications') : ref([])
provide('notifications', notifications)
This works fine if the user is signed in. The problem is if there is no user and they sign in, the provider doesn't update, and you have to refresh the app to get it work.
Potential solutions would be to watch the user state change, and then update the provider:
if (!_user) return
notifications = getCollection('profiles', null, user.value.displayName, 'notifications').documents
})
But that doesn't work. The other solution would be to make the call/injection in another component that is only there if there is a user. The issue with this is all of these components are siblings and you can not provide to a sibling ?
Any data that you provide are not automatically converted to a reactive data - you need to do it yourself
provide a ref or reactive object that wraps the data retrieved from Firebase
Use authentication state observer to update provided data
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 am using $router.go(-1) to go back to the previous page but as I am using this on a home page I want know how to check if there is a previous route.
Vue router navigation is tracked by the native browser history, use window.history.length.
If it is 0 there is nothing to go back to.
However; Users arriving from another website have a value higher than 0.
To overcome this issue, upon your App mounting; store the initial value of window.history.length globally.
Capture the initial value using a mount hook such as: beforeMount or mounted.
Store the history length value using $root as a global state:
this.$root.historyCount = structuredclone(window.history.length)
Alternatively use VueX if you are already leveraging the store bus plugin.
structuredclone or lodash.clone ensures you have a copy of the value rather than a reference to it, a reference would be bad; as this means you would always have the latest history count rather then the original entry point value.
https://developer.mozilla.org/en-US/docs/Web/API/structuredClone
https://lodash.com/docs/4.17.15#clone
When checking history state on a call to action, subtract $root.historyCount from window.history.length to see if zeroes out.
This way you will be only counting the history that occurs in your own app.
You may also want to consider that perhaps if your current route ($router.currentRoute) is the home page there is also no way of going back beyond that page but obviously will prevent back navigation to prior home revisits.
As window.history.length will always return 1.
You can use
if (window.history.state.back === null) {
router.push({path="/"}); //or whichever path you required
} else {
router.back();
}
I am building a react-native app. In this app, I am storing the last document (lastDoc) of a query result in redux and when the app is re-launched I use the persisted lastDoc as a starting point for a firestore query so that I can page the remaining firestore documents from where the user left off. I realized (after a Maximum call stack size exceeded error) that even though I send a document snapshot to be stored in the redux, the re-hydrated data is Object type, not QueryDocumentSnapshot and this breaks my startAfter query resulting in the aforementioned Maximum call stack size exceeded error.
Is there a way to store a document snapshot in react-redux? Or should I switch to using something like redux-firestore?
This is what I send to redux:
This is what gets re-hydrated from redux:
So, since you cannot store document snapshots in react-redux and since I did not want to switch to redux-firestore which would probably result in changes in my codebase that I don't want to go through at this stage, I came up with this alternative solution.
After getting my records from firestore backend, I get the last document in the fetched query snapshot and add to it the document's id like so:
var tLastDoc = querySnapshot[pageSize - 1];
tLastDoc.tDocId = querySnapshot[pageSize - 1].id;
And cache this tLastDoc in redux.
And in the snippet where paging happens, I check if the last document I am about to use for startAfter part of my query is actually a freshly fetched document snapshot or a non-snapshot fetched from redux like so:
if(lastDoc != null && typeof lastDoc.id === 'undefined'){
//stripped snapshot. get the document snapshot and use it for paging
} else {
//already a document snapshot, use it for paging
}
Remember from the screenshots in the question above that an actual document snapshot will have an "id" property. If "id" is not defined, it is actually the 'stripped' document snapshot coming from redux.
If it is a 'stripped' snapshot document coming from redux, I simply fetch the snapshot again from the firestore backend using the tDocId property I assigned above and use the returned document snapshot as my startAfter parameter.
This fetching of the last document from the firestore backend will only happen once each time the user re-launched the app to page the records using the cached lastDoc in the redux store. Then the paging will be used using the consecutive document snapshots retrieved at the end of each paging as long as the app is not backgrounded again.
Hope this helps.