Не могу вывести ответ на страницу

Вот код компонента , когда делаю console.log(this.clients) получаю null больше кода на https://stackblitz.com/edit/angular-ivy-kxmq2c?file=src%2Fapp%2Fpages%2Fadmin%2Flist-client%2Flist-client.component.html

export class ListClientComponent implements OnInit {


  checkboxForm: FormGroup;

  clients: UserProfile[];

  id: Observable<number>;

  userName: any;

  userIsBlockedTrue = true;
  userIsBlockedFalse = false;

  pageNumber: number;
  pageSize: number;

  constructor(
    private store$: Store<AdminState>,
    private matDialog: MatDialog,
    private adminService: AdminService,
    private formBuilder: FormBuilder
  )
  {
    this.checkboxForm = this.formBuilder.group({
      userIsBlockedFalse: [false],
      userIsBlockedTrue: [false]
    });
  }

  ngOnInit(): void {

    this.store$.pipe(select(getPageNumber)).subscribe(
      data => {
        this.pageNumber = data;
      }
    );

    this.store$.pipe(select(getPageSize)).subscribe(
      data => {
        this.pageSize = data;
      }
    );

    this.store$.dispatch(new GetClientList({
        pageNumber: this.pageNumber,
        pageSize: this.pageSize
      }
    ));

    this.store$.pipe(select(selectProfileModel)).subscribe(
      data => {
        this.clients = data;
        console.log(this.clients);
      }
    );
    this.id = this.store$.pipe(select(selectDeleteId));

  }

Код html,

<div class="container">
    <label class="listText">Users managment</label>
    <table mat-table [dataSource]="(clients)">

        <ng-container matColumnDef="userName">
            <th class="list" mat-header-cell *matHeaderCellDef >
                User Name
                <img class="adminMenuImg" src="../../../../assets/menu.png" mat-button [matMenuTriggerFor]="menu"/>
                <mat-menu #menu="matMenu">
                    <input class="adminMenuInput" type="text" mat-menu-item [(ngModel)]="userName" (ngModelChange)="searchByName()"
                        placeholder="search"/>
                </mat-menu>
            </th>
            <td mat-cell *matCellDef="let user">{{user.firstName}} {{user.lastName}}</td>
        </ng-container>

        <ng-container matColumnDef="userEmail">
            <th class="list" mat-header-cell *matHeaderCellDef >User Email</th>
            <td mat-cell *matCellDef="let user">{{user.email}}</td>
        </ng-container>

        <ng-container matColumnDef="status">
            <th class="list" mat-header-cell *matHeaderCellDef >
                Status
                <img class="adminMenuImg" src="../../../../assets/menu.png" mat-button [matMenuTriggerFor]="menu"/>
                <mat-menu #menu="matMenu">
                    <form [formGroup]="checkboxForm">
                        <div class="divInline">
                            <div class="labelRightActive">
                                <label>Active</label>
                            </div>
                            <div class="checkboxLeft">
                                <input type="checkbox" formControlName="userIsBlockedFalse" mat-menu-item  (change)="searchByIsBlockedFalse()"/>
                            </div>          
                        </div>
                       <div>
                           <div class="labelRightBlocked">
                                <label>Blocked</label>
                           </div>
                           <div class="checkboxLeft">
                                <input type="checkbox"  formControlName="userIsBlockedTrue" mat-menu-item  (change)="searchByIsBlockedTrue()"/>
                           </div>
                       </div>
                    </form>
                </mat-menu>
            </th>
            <td class="adminSlider" mat-cell *matCellDef="let user"><mat-slide-toggle (change)="blockUnBlock(user)" [checked]="user.isBlocked" ></mat-slide-toggle></td>
        </ng-container>

        <ng-container  matColumnDef="buttons">
            <th class="adminButtons" class="list" mat-header-cell *matHeaderCellDef ></th>
            <td mat-cell *matCellDef="let user">
                <a class="listEditButton" (click)="editUser(user)"><img class="listEditImg" src="../../../../assets/edit.png"/></a>
                <a class="listDeleteButton" (click)="deleteUser(user.id)"><img class="listDeleteImg" src="../../../../assets/delete.png"/></a>               
            </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="['userName', 'userEmail', 'status', 'buttons']"></tr>
        <tr mat-row *matRowDef="let row; columns: ['userName', 'userEmail', 'status', 'buttons']"></tr>

    </table>
    
</div>

Action

export enum EClientListAction{
    GetClientList = '[GetClientList] GetClientList',
    GetClientListSuccess = '[GetClientList] GetClientListSuccess',
    GetClientListError = '[GetClientList] GetClientListError',
}

export class GetClientList implements Action {
    public readonly type = EClientListAction.GetClientList;
    constructor(public payload: PageQuery){}
}

export class GetClientListSuccess implements Action {
    public readonly type = EClientListAction.GetClientListSuccess;
    constructor(public payload: PageResponse){}
}

export class GetClientListError implements Action {
    public type = EClientListAction.GetClientListError;
    constructor(public payload: any){}
}


export type GetListClient =  GetClientList | GetClientListSuccess | GetClientListError;

Reducers

export const getClientRegucer = (
    state = initialClientState,
    action: GetListClient
): ListClientState => {
    switch (action.type){
        case EClientListAction.GetClientListSuccess: {
            return {
                ...state,
                pageNumber: action.payload.pageNumber,
                pageSize: action.payload.pageSize,
                nextPage: action.payload.nextPage,
                previousPage: action.payload.previousPage,
            };
        }
        default: {
            return {
                ...state
            };
        }
    }
};

Selector

export const selectProfileModel = createSelector(
    selectClient,
    (state: AdminState): UserProfile[] => state.listClientState.listClientModel
);

export const getPageSize = createSelector(
    selectClient,
    (state: AdminState) => state.listClientState.pageSize
);

export const getPageNumber = createSelector(
    selectClient,
    (state: AdminState) => state.listClientState.pageNumber
);

export const getNextPage = createSelector(
    selectClient,
    (state: AdminState) => state.listClientState.nextPage
);

export const getPreviousPage = createSelector(
    selectClient,
    (state: AdminState) => state.listClientState.previousPage
);

export const getError = createSelector(
    selectClient,
    (state: AdminState) => state.listClientState.error
);

State

export interface ListClientState{
    listClientModel: UserProfile[];
    pageNumber: number;
    pageSize: number;
    nextPage: string;
    previousPage: string;
    error: any;
}

export const initialClientState: ListClientState = {
    listClientModel: null,
    pageNumber: 1,
    pageSize: 5,
    nextPage: null,
    previousPage: null,
    error: null
};

Effect

 @Effect()
    GetClients = this.actions$.pipe(
        ofType<clientListAction.GetClientList>(clientListAction.EClientListAction.GetClientList),
        mergeMap((action: clientListAction.GetClientList) =>
            this.adminService.getClients(action.payload).pipe(
                map((model: PageResponse) => {
                    console.log(model);
                    return new clientListAction.GetClientListSuccess(model);
                }),
                catchError((error) => {
                    console.log(error);
                    return of(new clientListAction.GetClientListError(error));
                })
            ))
    )

Service метод получения пользователей

 getClients(paginationQuery: PageQuery): Observable<PageResponse>{
    let params = new HttpParams()
                                .set('pageNumber', paginationQuery.pageNumber.toString())
                                .set('pageSize', paginationQuery.pageSize.toString());
    return this.http.get<PageResponse>(`${environment.apiUrl}admin/getusers`, { params });
  }

Результат в консоле

{data: Array(3), pageNumber: 1, pageSize: 5, nextPage: "http://localhost:60397/?pageNumber=2&pageSize=5", previousPage: null}
data: Array(3)
0: {firstName: "dima", lastName: "vovk", confirmedEmail: true, isBlocked: false, id: "236f4fe0-28e8-4537-921f-3846f54a61fe", …}
1: {firstName: "Admin", lastName: "Admin", confirmedEmail: true, isBlocked: false, id: "4769fe6a-d893-40b8-b84f-05ce1a6a3df0", …}
2: {firstName: "vitalik", lastName: "basanets", confirmedEmail: true, isBlocked: false, id: "f9bbfe8c-07d5-4602-9931-b70c9babb177", …}
length: 3
__proto__: Array(0)
nextPage: "http://localhost:60397/?pageNumber=2&pageSize=5"
pageNumber: 1
pageSize: 5
previousPage: null
__proto__: Object