Блог

Я запускаю отправку onInit shell component , но получаю значение как undefined . в случае, если я обновлю страницу, значение вернется правильно selector . не знаю, как это исправить. тоже не получаю никаких ошибок.. users часть действий работает нормально.

вот это действие:

 import { createAction, props } from "@ngrx/store";
import { PropUsers, PropUser } from "./reducer";

export const userActions = {
    GET_USERS: '[users] Get Users',
    GET_USERS_SUCESS: '[users] Get Users Success',
    GET_USERS_FAILURE: '[users] Get Users Failure',

    GET_PROFILE: '[users] Get Users',
    GET_PROFILE_SUCESS: '[users] Get Users Success',
    GET_PROFLE_FAILURE: '[users] Get Users Failure',
}

export const actionGetUsers = createAction(userActions.GET_USERS);
export const actionGetUsersSuccess = createAction(userActions.GET_USERS_SUCESS, props<{ users: PropUsers[] }>());
export const actionGetUsersFailure = createAction(userActions.GET_USERS_FAILURE, props<{ error: string }>());

export const actionGetProfile = createAction(userActions.GET_PROFILE);
export const actionGetProfileSuccess = createAction(userActions.GET_PROFILE_SUCESS, props<{ user: PropUser }>());
export const actionGetProfileFailure = createAction(userActions.GET_PROFLE_FAILURE, props<{ error: string }>());
 

селектор:

 import { createSelector, createFeatureSelector } from '@ngrx/store';
const usersSelector = createFeatureSelector<any>("store");

export const selectUsers = createSelector(usersSelector, (state) => {
    return state.reducerUser.users;
})
export const selectProfile = createSelector(usersSelector, (state) => {
    console.log('state', state.reducerUser.profile);
    return state.reducerUser.profile;
})
 

компонент оболочки:

 import { Component, EventEmitter, OnInit, Output } from '@angular/core';
import { Store, select } from "@ngrx/store";
import { Observable } from 'rxjs';
import { map } from "rxjs/operators";
import { PropUser } from '../../store/reducer';
import { actionGetProfile } from './../../store/actions';
import { selectProfile } from "./../../store/selectors";

@Component({
  selector: 'app-shell-user-profile',
  templateUrl: './shell-user-profile.component.html',
  styleUrls: ['./shell-user-profile.component.scss']
})
export class ShellUserProfileComponent implements OnInit {

  @Output() userProfile$: Observable<PropUser> = new EventEmitter<PropUser>();
  @Output() standClass: string;

  constructor(private readonly store: Store) {
    this.standClass = '12th';
  }

  ngOnInit(): void {
    this.store.dispatch(actionGetProfile());
    this.store.select(selectProfile).subscribe(data => console.log('data', data)); //undefined until refresh the page
  }

}
 

Вы должны использовать разные строковые значения для своих действий.

 GET_USERS: '[users] Get Users',
 

это то же самое, что

 GET_PROFILE: '[users] Get Users',
 

Таким образом, даже если кажется, что вы запускаете другое действие (потому что используете другой символ), на самом деле вы запускаете то же самое действие, которое привлекает пользователей.

Каждое из ваших действий должно иметь разное строковое значение. Попробуйте это вместо этого:

 GET_PROFILE: '[users] Get Profile',
GET_PROFILE_SUCESS: '[users] Get Profile Success',
GET_PROFLE_FAILURE: '[users] Get Profile Failure',