कोणीय ngrx दिखाएँ लोड हो रहा है gif

Question

मैं इस तरह एक पक्ष प्रभाव है।

मैंने लोडिंग प्रतीक दिखाने के लिए क्रियाओं, Reducers और स्टोर स्थिति का एक अलग सेट बनाया है।

export class BusyActions { 
static SHOW_SPINNER = "SHOW_SPINNER"; 
static HIDE_SPINNER = "HIDE_SPINNER"; 

showSpinner(): Action { 
    return { type: BusyActions.SHOW_SPINNER }; 
} 

hideSpinner(): Action { 
    return { type: BusyActions.HIDE_SPINNER }; 
} 

export const BusyState: IBusyState = { 
    visible: false, 
    busy: false 
}; 

मैं इसे इस तरह से किया है क्योंकि लोड हो रहा है राज्य अन्य मॉड्यूल, राज्यों के साथ साझा करने की जरूरत है, आदि

कैसे मैं पक्ष प्रभाव से मेरी BusyActions कहते हैं? मुझे शुरुआत में SHOW_SPINNER को कॉल करना होगा और अंत में HIDE_SPINNER को कॉल करना होगा।

क्या मैंने यह सही तरीके से किया है? या क्या इसे संभालने का एक बेहतर तरीका है?

Answer 1

इस लक्ष्य को हासिल करने के लिए आप अपने मामले में पैकेज का उपयोग करने के लिए सभी आवश्यक मॉड्यूल को जोड़ने के बाद इस NPM पैकेज https://www.npmjs.com/package/angular2-busy

उपयोग कर सकते हैं आप एक चर

busy: Promise<any>; 

या

busy: Subscription; 

घोषित करने के लिए की जरूरत है

और फिर इस चर का उपयोग करें

this.busy = this.actions$ 
.ofType(SalesOrderActions.FETCH_ALL_ORDERS) 
.switchMap((action: Action) => { 
    return this.soApiService.getUsersSalesOrders(action.payload); 
}) 
.map((salesOrders: ListDto<SalesOrderList>) => this.actions.fetchAllOrdersSuccess(salesOrders)); 

यदि आप अपनी व्यस्त क्रिया वर्ग का उपयोग करना चाहते हैं तो आपको इस कक्षा को अपने घटक में आयात करना होगा और घटक कन्स्ट्रक्टर में एक निजी चर बनाना होगा और कक्षा की वांछित कार्रवाई को कॉल करना होगा जहां यह आवश्यक है। लेकिन मेरे लिए यह उपरोक्त पैकेज का उपयोग करना बेहतर है जो बहुत अच्छा काम करता है।

Answer 2

चलो एक उदाहरण लें: यदि आप उपयोगकर्ता को लाने के लिए चाहते हैं।

क्या मैं आमतौर पर उस के लिए कार्य करें:
- एक कार्रवाई FetchUser
डिस्पैच - कम करने में, users पर एक ध्वज सेट: isUserFetching: true
- एक प्रभाव के भीतर है कि कार्रवाई
पकड़ो - कॉल आप क्या चाहते हैं, एक सेवा उदाहरण
के लिए - सेवा देता है जब वह क्या लाया था, कि एक सफलता कार्रवाई करने के लिए नक्शे: FetchUserSuccess
- अगर कुछ गलत हो गया, एक त्रुटि कार्रवाई करने के लिए त्रुटि के नक्शे: FetchUserError
- अपना उपयोगकर्ता कम करने में, FetchUserSuccess के लिए करता है, तो आप क्या चाहते हैं + सेट isUserFetching: false
हैं - आपका उपयोगकर्ता कम करने में, FetchUserError के लिए करता है, तो आप क्या चाहते हैं + सेट isUserFetching: false

@Effect() 
fetchUser$: Observable<Action> = this.actions$ 
    .ofType(FetchUser) 
    .pipe(
    switchMap(action => 
     this.usersService.fetchUser(action.payload).pipe(
     map(
      res => 
      new FetchUserSuccess({ 
       id: action.payload.id, 
       data: res, 
      }) 
     ), 
     catchError((err: HttpErrorResponse) => 
      of(new FetchUserError(action.payload)) 
     ) 
    ) 
    ) 
); 

आपके विचार के भीतर आप के अच्छे हिस्से का चयन कर सकते हैं एक चर में स्टोर, isFetchingUser$ कहें और करें:

<div *ngIf="isFetchingUser$ | async; else #loadingUser"> 
    Show the user here 
</div> 

<div loadingUser> 
    Fetching user information 
</div>