代码之家 › 专栏 › 技术社区 › merko

NGRX状态属性消失

ngrx-effects ngrx-store ngrx angular javascript

merko · 技术社区 · 6 年前

我正在尝试从数据库中获取用户信息。在组件中,我从服务中获取解码的id,然后调用将id作为参数的操作。它返回用户,在网络标签中有响应。状态属性“currentUser”一直为null,直到它应该更改为response,然后它就会消失。

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
    })));
  }

2 回复 | 直到 6 年前

kauppfbi 6 年前

试着这样做:

   

@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
          }))
        )
      )
    );

Heehaaw 6 年前

{
  type: fromActions.GET_USER_SUCCESS,
  payload: res
}

但是在你的减速机里你希望它有一个 user 它的属性

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
  };
}

另外,试着把你的效果塑造成这样:

@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 })
        )
      )         
    );

推荐文章

Rajiv · ngrx选择器订阅多次引发事件。。。存储中有实值,然后是未定义的值,然后是空值

6 年前

Thiago Rodrigues · 从Reducer调用选择器

6 年前

Hikmat G. · ngrx保存状态数据的地方

6 年前

bucicimaci · 链式减速器ngrx

6 年前

Stefan Orzu · 同一NgRx功能模块的独立实例

6 年前

shaelex · Angular5 ngrx/存储更改数组值

6 年前

morphatic · 使用@ngrx/store时,这是访问类内状态变量的正确方法吗?

6 年前

Mike · 父组件中服务器的初始状态

7 年前

Gregor Doroschenko · 如何使ngrx/store功能模块与延迟加载的模块一起工作?

7 年前

antonyboom · NgRX store select返回存储状态而不是数据

7 年前