调用dispatch在ngrx状态管理中的一系列操作

huangapple go评论73阅读模式
英文:

Calling dispatch in a sequence in ngrx StateManagement

问题

以下是您要翻译的内容:

I have the following code which uses ngrx for state management. I am relatively new to ngrx and while I understand that this.store.select is used to subscribe for any state change , I have the following question.

a) If we call dispatch functions one after the other like the below snippet inside select function, wont this lead to an infinite loop(considering Action1,Action2 refer to altering same State and this.store.select(locationState => locationState.countriesState) keeps getting executed since state changes)? will the third statement be ever called?
Is dispatch a synchronous function?

this.store.dispatch('Action1');
this.store.dispatch('Action2');
this.router.navigation(['/confirm-region'],{relativeTo: this.route.parent })

regioncomponent.ts

import { Subscription } from 'rxjs/Subscription';

export class RegionComponent implements OnInit,OnDestroy {
storeSubscriptions = <Subscription[]>[];
constructor(private store : Store<TestState>)
{
}

ngOnInit() {
this.storeSubscriptions.push(
this.store.select(locationState => locationState.countriesState).subscribe(state =>
{
this.region = state.region,

 if(state.Status == true)
 {
   this.store.dispatch(&#39;Action1&#39;);
   this.store.dispatch(&#39;Action2&#39;);
   this.router.navigation([&#39;/confirm-region&#39;],{relativeTo: this.route.parent })
})
}

}

ReducerList.ts

import {ActionReducerMap} from '@ngrx/store';

export interface TestState
{
countriesState : countriesState
}
export const reducers : ActionReducerMap<TestState> =
{
countriesState : countriesStateReducer
}

countriesStateReducer.ts

export function countriesReducer(state : countries,action: Action)
{

switch action.type {
case Action1:..
case Action2:..
}
}

英文:

I have the following code which uses ngrx for state management. I am relatively new to ngrx and while I understand that this.store.select is used to subscribe for any state change , I have the following question.

a) If we call dispatch functions one after the other like the below snippet inside select function, wont this lead to an infinite loop(considering Action1,Action2 refer to altering same State and this.store.select(locationState => locationState.countriesState) keeps getting executed since state changes)? will the third statement be ever called?
Is dispatch a synchronous function?

   this.store.dispatch(&#39;Action1&#39;);
   this.store.dispatch(&#39;Action2&#39;);
   this.router.navigation([&#39;/confirm-region&#39;],{relativeTo: this.route.parent })

regioncomponent.ts

    import { Subscription } from &#39;rxjs/Subscription&#39;;
    
    export class RegionComponent implements OnInit,OnDestroy {
    storeSubscriptions =  &lt;Subscription[]&gt;[];
    constructor(private store : Store&lt;TestState&gt;)
    {
    }
    
    ngOnInit() {
     this.storeSubscriptions.push(
this.store.select(locationState =&gt; locationState.countriesState).subscribe(state =&gt;
    {
     this.region = state.region,
     
     if(state.Status == true)
     {
       this.store.dispatch(&#39;Action1&#39;);
       this.store.dispatch(&#39;Action2&#39;);
       this.router.navigation([&#39;/confirm-region&#39;],{relativeTo: this.route.parent })
    })
    }
}

ReducerList.ts

import {ActionReducerMap} from &#39;@ngrx/store&#39;;
    
export interface TestState
{
 countriesState : countriesState
}
export const reducers : ActionReducerMap&lt;TestState&gt; = 
{ 
  countriesState : countriesStateReducer
}

countriesStateReducer.ts

export function countriesReducer(state : countries,action: Action)
{

switch action.type {
 case Action1:..
 case Action2:..
}
}

答案1

得分: 2

如果我们像在select函数内的下面代码片段一样连续调用dispatch函数,是否会导致无限循环(考虑到Action1、Action2指的是改变同一状态,并且this.store.select(locationState =&gt; locationState.countriesState)一直在执行,因为状态发生了变化)?

这取决于情况。当您取消订阅时,可以打破循环。我认为取消订阅发生在onDestroy钩子中。(如果我错了,请告诉我,但是您的示例看起来是这样的)。
如果您从未取消订阅,您将陷入无限循环。

第三个语句会被调用吗?dispatch是同步函数吗?

是的,它会被调用。我认为这就是为什么您的代码仍然可以正常工作而不会陷入无限循环的原因。
当您调用router.navigate时,当前组件会被销毁(我猜是这样,但看起来是这样,请您自行验证),因为加载了另一个路由。这意味着当前组件取消订阅状态更改并停止分派操作和导航。

英文:

If we call dispatch functions one after the other like the below snippet inside select function, wont this lead to an infinite loop(considering Action1,Action2 refer to altering same State and this.store.select(locationState => locationState.countriesState) keeps getting executed since state changes)?

It depends. You can break the loop when you unsubscribe from it. And i think the unsubscribe happens in the onDestroy Hook. (Please let me know, if this is wrong, but you example looks like this).
If you never unsubscribe you will come into an infinite loop.

will the third statement be ever called? Is dispatch a synchronous function?

Yes, it will be called. And i think that is the reason, why your code still works without hanging in an indefinite loop.
When you call router.navigate the current component get's destroyed (i guess, but it looks like that, please validate by your own) because another route get's loaded. This means, that the current component unsubscribes from state changes and stops dispatching actions and navigating.

huangapple
  • 本文由 发表于 2023年5月24日 17:36:44
  • 转载请务必保留本文链接:https://go.coder-hub.com/76322104.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定