Угловой магазин NGXS имеет нулевой корень - PullRequest
Новая
       29

Угловой магазин NGXS имеет нулевой корень

0 голосов
/ 14 апреля 2019

Я пытаюсь создать базовое хранилище в своем угловом приложении и следую учебному пособию, но когда я смотрю на магазин в Redux DevTools, структура магазина выглядит как Store> null> User, а не Store> User.

Это может быть проблемой с Redux Tools и NGXS, но также и когда я пытаюсь использовать селектор для получения информации, ничего не возвращается

Это мой Код штата (user.state.ts): 

  @State<UserStateModel>({
      name: 'user',
      defaults: {
        user: null
      }
    })

    export class UpdateUser {
      static readonly type = '[User] Update User';
      constructor(public user: User) { }
    }

    export interface UserStateModel {
      user: User;
    }

    export class UserState {
      @Selector()
      public static user(state: UserStateModel): User {
        return state.user;
     }

    @Action(UpdateUser)
      updateUser(ctx: StateContext<UserStateModel>, action: User) {
      const state = ctx.getState();
      console.log('update user action', action);
      ctx.patchState({
        user: action
      });
    }

Вот моя модель пользователя (user.model.ts): 

export class User {
  userId?: string;
  username?: string;
  password?: string;
  token?: string;
}

И, наконец, где я пытаюсь использовать селектор (ts): 

  user$: Observable<User>;

  @Select(UserState.user) userSelect$: Observable<User>;
  constructor(private summonerService: SummonerService, private store: Store) {
    this.user$ = this.store.select(state => state.user.user);
  }

(шаблон) 

<div>
  {{(this.user$ | async)?.userId}}
</div>

Я не получаю ошибок при компиляции или во время выполнения, консольный журнал в действии показывает правильную информацию, как и хранилище (кроме нуля)

Заранее благодарен за любую помощь

1 Ответ

0 голосов
/ 28 апреля 2019

Не уверен, что это произошло из-за вставки копии, но декоратор @State() должен быть присоединен к классу, который представляет состояние.Не для одного из действий.Кроме того, действие имеет тип UpdateUser, а не тип User.Следовательно, это должно выглядеть так: 

export class UpdateUser {
  static readonly type = '[User] Update User';
  constructor(public user: User) { }
}

export interface UserStateModel {
  user: User;
}

// Decorator belongs here
@State<UserStateModel>({
  name: 'user',
  defaults: {
    user: null
  }
})
export class UserState {
  @Selector()
  public static user(state: UserStateModel): User {
    return state.user;
  }

  @Action(UpdateUser)
  updateUser(ctx: StateContext<UserStateModel>, action: UpdateUser) { // Changed Datatype
    const state = ctx.getState();
    console.log('update user action', action);
    ctx.patchState({
      user: action.user // Changed fromn action to action.user
    });
  }
}
...