My problem is that I see my effect worked and updated data in store, but my view dont updated. I added breakboint on button click to see if Boards$ updated in component, and i see that it have from effect. Pls help me figure it out. I have the following:

store:

export interface AppState {
    isLoading: boolean;
    readonly boards: Board[];
    error: string | null;
}

actions:

export const getBoards = createAction('[Boards] Get Boards');
export const getBoardsSuccess = createAction('[Boards] Get Boards Success', props<{ boards: Board[] }>());
export const getBoardsFailture = createAction('[Boards] Get Boards Failture', props<{ error: string }>());

reduser:

export const initialState: AppState = {
    isLoading: false,
    boards: [],
    error: null
};

export const BoardReducers = createReducer(
    initialState,
    on(BoardActions.getBoards, (state) => ({ ...state, isLoading: true })),
    on(BoardActions.getBoardsSuccess, (state, action) => ({ ...state, isLoading: false, boards: action.boards })),
    on(BoardActions.getBoardsFailture, (state, action) => ({ ...state, isLoading: false, error: action.error }))
)

effect:

@Injectable()
export class BoardsEffects {
    $getBoards = createEffect(() =>
        this.actions$.pipe(
            ofType(BoardsActions.getBoards),
            switchMap(() =>
                this.service.getBoards().pipe(
                    map((boards) => BoardsActions.getBoardsSuccess({ boards })),
                    catchError((error) =>
                        of(BoardsActions.getBoardsFailture({ error: "Fail to load boards" }))
                    ))
            )
        )
    )

    constructor(private actions$: Actions, private service: TaskboardService) {

    }
}

selector:

export const selectFeature = (state: AppState) => state

export const boardsSelector = createSelector(selectFeature, (state) => state.boards);

component:

<ul style="list-style-type: none;  padding-left: 15px;">
    <li *ngFor="let board of (Boards$ | async)">
        <app-board-list [board]="board" [parent]="this"></app-board-list>
    </li>
</ul>

export class AppComponent implements OnInit {
  Boards$: Observable<Board[]>;

  constructor(public service: TaskboardService,
    private store: Store<AppState>) {
    this.Boards$ = this.store.select(boardsSelector)
  }

  ngOnInit(): void {
    this.store.dispatch(BoardsAction.getBoards());
  }
}

I expect to display list of boards after get it from backend