कोणीय 2 @ एनजीआरएक्स/स्टोर/प्रभाव - सेवा कार्यों को कहां कॉल करें

Question

मैं @ एनजीआरएक्स/स्टोर और @ एनजीआरएक्स/प्रभाव के साथ एक कोणीय 2 ऐप बना रहा हूं।

मैं समझने के साथ संघर्ष कर रहा हूं कि क्रियाओं/प्रभावों के बाहर तर्क कहां रखना है और सेवा कार्यों को कहां कॉल करना है।

उदाहरण के लिए

, प्रमाणीकरण के साथ ...

1. एक उपयोगकर्ता लॉगिन क्लिक करता है यह पेलोड के रूप में लॉगइन क्रेडेंशियल्स के साथ एक AUTH_REQUEST कार्रवाई डिस्पैचिज।
2. एक प्रभाव इस क्रिया को एपीआई कॉल करता है।
3. एक सफल परिणाम प्रतिक्रिया ऑब्जेक्ट में टोकन, उपयोगकर्ता नाम आदि के साथ कार्रवाई को एक पेलोड के रूप में कॉल करता है जो AuthState को अद्यतन करने के लिए Reducer पर जाता है।

जैसे: AuthEffects

@Effect() authenticate$ = this.updates$ 
.whenAction(AuthActions.AUTHENTICATE_REQUEST) 
.switchMap(update => this.api.post('/authenticate', update.action.payload) 
    .map((res:any) => ({type: AuthActions.AUTHENTICATE_SUCCESS, payload: res.json()})) 
    .catch((err:any) => Observable.of({ type: AuthActions.AUTHENTICATE_ERROR, payload: err })) 
); 

में AuthReducer

case AuthActions.AUTHENTICATE_SUCCESS: 
    return Object.assign({}, state, <AuthState>{ 
    processing: false, 
    failed: false, 
    isLoggedIn: true, 
    token: action.payload.token, 
    username: action.payload.username, 
    accountId: action.payload.accountId, 
    }); 

में क्या मैं जानना चाहता हूँ है:

1. कहाँ रूटर कॉल करने के लिए एक AUTH_SUCCESS के बाद पृष्ठों को बदलने के लिए कार्रवाई संसाधित की जाती है। क्या मैं इसे प्रतिक्रियाशील श्रृंखला या .... के भीतर से करता हूं ??
2. मेरे पास AuthService है जिसे स्थानीय स्टोरेज में प्रमाण-पत्र (टोकन इत्यादि) को स्टोर करने की आवश्यकता है। मुझे इसे "टोकन स्टोर" यानी authService.store(userCredentials) कहां से कॉल करना चाहिए।

किसी भी मदद की सराहना की।

Answer 1

स्पष्ट रूप से, यह एक निश्चित उत्तर नहीं है; यह वही है जो मैंने करना चुना था।

CodeSequence/ngrx-‌​store-router v3 राउटर के लिए क्रियाएं लागू करता है। हालांकि, यह एक एक्शन निर्माता को लागू नहीं करता है - बस string प्रकार। मैं एक साधारण कार्रवाई निर्माता का इस्तेमाल किया ताकि मैं हर जगह कार्रवाई शाब्दिक है करने के लिए की जरूरत नहीं है:

import * as ngrxStoreRouter from "ngrx-store-router"; 

@Injectable() 
export class RouterActions { 

    static NAVIGATE: string = ngrxStoreRouter.RouterActions.navigating; 
    navigate(url: string): Action { 

     return { 
      payload: { url }, 
      type: RouterActions.NAVIGATE 
     }; 
    } 
} 

और मैं रूटर कार्यों प्रेषण करने के लिए एक प्रभाव वर्ग प्रयोग किया है:

@Injectable() 
export class RouterEffects { 

    ... 

    @Effect() 
    createUser(): Observable<Action> { 

     return this.stateUpdates_ 
      .whenAction(AuthActions.CREATE_USER_SUCCESS) 
      .map((update) => update.action.payload) 
      .switchMap((payload) => { 

       return Observable.of(this.routerActions_.navigate("/on-board")); 
      }); 
    } 

    ... 
} 

मेरी तर्क यह थी कि इसमें रूटिंग के बारे में कुछ भी जानने के प्रमाणीकरण प्रभाव शामिल नहीं हैं, यह राउटर प्रभावों के लिए परीक्षण लिखना आसान बनाता है, और राउटर क्रिया @ngrx/store-devtools के साथ अच्छी तरह से फिट होती है।

अपने दूसरे प्रश्न के संबंध में, मैं इसे प्रभाव में ..._SUCCESS कार्रवाई तक तार करने के इच्छुक हूं।

मुझे वैकल्पिक दृष्टिकोणों के बारे में सुनने में दिलचस्पी होगी।

Answer 2

इस प्रकार की कार्यक्षमताओं को संभालने वाली एक ngrx "आधिकारिक" लाइब्रेरी भी है, @ngrx/router-store। their migration guide द्वारा संकेतित अनुसार, @ कोणीय/राउटर 3.0.0 (अब आरसी 1 में) के पक्ष में @ ngrx/राउटर को बहिष्कृत किया जा रहा है।नतीजतन, राउटर-स्टोर में कोणीय राउटर में माइग्रेट करने के लिए भी परिवर्तन हो रहा है, और pending PR यह संबोधित कर रहा है। जब सब कुछ उम्मीद है कि सुलझेगी एक सा, रूटर की दुकान नेविगेशन प्रयोजनों के लिए एक कार्रवाई निर्माता प्रदान करता है, बहुत आसान प्रभाव से वापस जाने के लिए:

// ... 
import { Effect, toPayload, StateUpdates } from '@ngrx/effects'; 
import { go } from '@ngrx/router-store'; 

// ... in custom effects class 

@Effect() loginSuccess$: Observable<Action> = this.updates$ 
    .whenAction(LoginActions.LOGIN_SUCCEEDED) 
    .map<ActionPayloads.LoginSucceeded>(toPayload) 
    .do(successPayload => { 
    // grab auth information you need to store 
    // and save them now, accessing your local storage service 

    const { authInfo, rememberMe } = successPayload; 

    this.authStorage.save(authInfo, rememberMe); 
    }) 
    .map(_ => go(homeRoutePath)); 

अभी ऐसा लगता है यह काम नहीं करता है, लेकिन यह वापस जैसे ही होना चाहिए राउटर-स्टोर अपडेट किया गया है। अन्य कार्यों

import { go } from '@ngrx/router-store'; 
... 

@Injectable() 
export class AuthEffects { 

    constructor(
    private actions$: Actions, 
    private authService: AuthService 
) { } 

    @Effect() loginSuccess$: Observable<Action> = this.actions$ 
    .ofType(auth.ActionTypes.LOGIN_SUCCESS) 
    .map((action) => action.payload as AuthUser) 
    .do((user: AuthUser) => console.info('welcome ' + user.name)) 
    .map(() => go(['/welcome'])); 

} 

कॉल/प्रभाव अंतिम कार्रवाई से पहले के रूप में की जरूरत: HTH

Answer 3

मैं इसे इस तरह से बनाते हैं। बेशक, यह उदाहरण '@ngrx/router-store' का उपयोग कर काम करता है।

आधिकारिक रेपो से अद्भुत example-app कोड पढ़ें।