NGRX状态属性消失

Question

I'm trying to get user info from database. In component I'm getting decoded id from service, then call the action which takes the id as parameter. It returns the user, there is response in network tab. The state property 'currentUser' is null all the time until it should change to response, then it disappears.

 export interface State { loading: boolean; loggedIn: boolean; currentUser: User; } const initialState: State = { loading: false, currentUser: null, loggedIn: localStorage.getItem("token") ? true : false }; case AuthActions.GET_USER_SUCCESS: { return { ...state, loading: false, loggedIn: true, currentUser: action.user }; } @Effect() getUserInfo$: Observable < Action > = this.actions$ .ofType(fromActions.GET_USER) .pipe(map((action: fromActions.GetUser) => action.id), concatMap(id => { return this.authService.getUser(id); }) ) .pipe(map((res: User) => ({ type: fromActions.GET_USER_SUCCESS, payload: res }))); } 

Answer 1

Try it like this:

 @Effect() getUserInfo$: Observable<Action> = this.actions$ .ofType(fromActions.GET_USER) .pipe( map((action: fromActions.GetUser) => action.id), concatMap(id => this.authService.getUser(id).pipe( map((res: User) => ({ type: fromActions.GET_USER_SUCCESS, payload: res })) ) ) ); 

Answer 2

What is the shape of your action class? I can see you dispatch an action in the shape of

{
  type: fromActions.GET_USER_SUCCESS,
  payload: res
}

but in your reducer you expect it to have a user property on it

case AuthActions.GET_USER_SUCCESS:
{
  return {
    ...state,
    loading: false,
    loggedIn: true,
    currentUser: action.user // <- try action.payload or action.payload.user, 
                             // depending on what you get from the API
  };
}

Also, try to shape your effect more like this:

@Effect()
  getUserInfo$: Observable <Action> = this.actions$
    .ofType(fromActions.GET_USER)
    .pipe(
      switchMap(({ id }) => this.authService.getUser(id)
        .pipe(
          map((res: User) => ({ type: fromActions.GET_USER_SUCCESS, payload: res }),
          // Handling errors in an inner Observable will not terminate your Effect observable 
          // when there actually is an error
          catchError(err => ({ type: fromActions.GET_USER_ERROR, payload: err })
        )
      )         
    );

Hope this helps a little :)