I'm learning x-state and I'm overwhelmed about its functionality, but I'm having issues understanding history nodes.
I'm creating a state which should hold the execution of the machine until an action is triggered:
So if the machine is in AwaitingEmployeeSignature or AwaitingOnboardingCompletion, and the EA_REDLINED event is triggered, I want to move the machine to the Paused state. But after a RESUME event (which is not implemented), I want to resume the last state AwaitingEmployeeSignature or AwaitingOnboardingCompletion, depending on what was the state before the Paused state
As I understand history nodes, it can achieve what I want, but as far as I understood, it doesn't hold this state, but when on it, it automatically moves to the last state (which is not what I want). How can I stay in the Paused state, and only move to the previous state when the RESUME event is triggered?
Thanks in advance!
A history node targets the most recently visited child state of a parent state before exiting that parent state.
In your case, the solution would be to place the top 5 states in your diagram in some parent state, add a history state to that parent state, and on resume, transition to that e.g. parent.hist state.
Then the target of that resume event will be the last state that the parent state was in.
Related
I would like to avoid using event bus to being informed when a value in state placed. is there any event when a mutation called? I think it exists since it's event showing in Vue dev tools.
In state design pattern ,In the worst case when a new state is added to parent State, it causes all other states to change as well.
What changes need to be made to the design to prevent successive changes?
When I watch $store.stateA, the watch callback function for the following seems to not trigger.
stateA: false
muationA(state,val){
state.stateA = val
}
actionA({commit},val) {
commit('mutationA', true)
commit('mutationB', false) //take this out would trigger the watch callback
}
So what is the case here? the entire action callback need to finish before the watch functions are triggered?
As Nit mentioned, both mutations cancel each other since they are done synchronously. Read the "Reactivity in Depth" section of the doc for more info. In particular (emphasis mine):
In case you haven’t noticed yet, Vue performs DOM updates asynchronously. Whenever a data change is observed, it will open a queue and buffer all the data changes that happen in the same event loop. If the same watcher is triggered multiple times, it will be pushed into the queue only once. This buffered de-duplication is important in avoiding unnecessary calculations and DOM manipulations. Then, in the next event loop “tick”, Vue flushes the queue and performs the actual (already de-duped) work.
Other watcher solutions do work differently and are triggered right away when the value changes (e.g. Backbone.js). Vue does not work that way.
I wanted once to use a vuex variable as an event transmitter across components and needed to set a boolean variable to false and immediately to true afterward. I however saw that the watch in the component did not pick it up. The issue as mentioned in the other post is that they cancel each other because they are in the same event loop.
In order to make that work, I just had to separate their event loop by waiting for the Vue.nextTick() as follows:
// First operation
await Vue.nextTick();
// Second operation
During the registration process of the app I want react-navigation to be able to resume from the component it was previously. However once the user is logged in, I no longer need to resume from where it was, I want it to start from the beginning.
I've got redux-persist for persisting my redux state and navigation state is connected correctly with react-navigation. However I am not sure if:
I can stop persisting navigation state once a condition is met. Seems that whitelist config is hardcoded in the persistor and can't be changed.
Is there a way to reset navigation state before StackNavigator gets it based on a condition store in the state itself.
I am reading the vue official doc on Async Update Queue, and got confused on:
Whenever a data change is observed, it will open a queue and buffer
all the data changes that happen in the same event loop
what does it mean by the same event loop, are there gonna be multiple event loops at the same time? It also says the queue will be flushed in the next event loop “tick”, what does tick mean here? what if there is no next event loop or the next event loop never tick?
Let me try answering this question as par my understanding.
what does it mean by the same event loop, are there gonna be multiple event loops at the same time?
Instead of applying each and every change in any vue property/method/variable to the view, vue saves all those changes in queue and flush those changes later. In this process of pushing the changes in the queue, it optimises by not re-rendering on each change as is commented here:
/**
* Push a watcher into the watcher queue.
* Jobs with duplicate IDs will be skipped unless it's
* pushed when the queue is being flushed.
*/
export function queueWatcher (watcher: Watcher) {
...
...
the queue will be flushed in the next event loop “tick”, what does tick mean here?
Internally Vue tries native Promise.then and MutationObserver for the asynchronous queuing and falls back to setTimeout(fn, 0). Here you can see first preference for this is given to native Promise.then after that MutationObserver where native Promise is not available and in worst case fallback to setTimeout.