Store NGRX : can't get value from store

I am currently doing a basic NGRX store.

I want a value in my Store (value called chipSelected: string), display that value in AA.component.ts and change it in BB.component.ts (through a button).

So I want my value displayed in AA.Component.ts initialized with my state initialState, and when I change it in BB.component.ts (through a button), my display var should be changed to.

This is currently what I have :

AA.component.ts

 chipSelected$: Observable<string>;

  constructor(
    public emailService: EmailService,
    private store: Store<EmailState>
  ) {
    this.chipSelected$ = this.store.select('chipSelected').pipe(
      map((chipSelected: string) => {
        return chipSelected;
      })
    );
  }

AA.component.html

{{chipSelected$ | async}}

BB.component.ts

constructor(private store: Store<EmailState>) {}
  //Triggered when button clicked
  setChip(): void {
    console.log("button clicked!")
    this.store.dispatch(changeChip({ chipSelected: 'newValue' }));
  }

email.state.ts

export const initialEmailState: EmailState = {
  chipSelected: 'oldValue',
};

export interface EmailState {
  chipSelected: 'oldValue' | 'newValue';
}

email.actions.ts

import { createAction, props } from '@ngrx/store';

export const changeChip = createAction(
  '[Email component] change chip selection',
  props<{ chipSelected: string }>()
);

email.reducer.ts

import { Action, createReducer, on } from '@ngrx/store';
import * as EmailAction from './email.actions';
import { EmailState, initialEmailState } from './email.state';

const changeChipReducer = (
  state: EmailState,
  action: ReturnType<typeof EmailAction.changeChip>
): EmailState => ({
  ...state,
  chipSelected: action.chipSelected,
});

export const emailReducer = createReducer(
  initialEmailState,
  on(EmailAction.changeChip, changeChipReducer)
);

In app.module.ts (in which I import my EmailModule)
StoreModule.forRoot({ root: emailReducer }),

In my console, I have "Button clicked" printed.
But on my view, I have not "oldValue" where I display my Observable, nor "newValue" when I click on the button. I have nothing displayed :'(

I don't see the action pass in my Redux Devtools, so I don't think it passed...

Like if my store and my component are not well declared... ?

Thank you very much for your help !

Overall, your code posted looks fine, the only thing missing is a proper selector. You have this.store.select('chipSelected') but, where is chipSelected declared/defined?, it should be in the Email selectors:

// somewhere in the store
export interface AppState {
  email: EmailState;
}

// email.selectors.ts
export const selectEmail = (state: AppState) => state.email;
export const selectChip = createSelector(selectEmail, (email) => email.chipSelected);

Then, in your component:

import * as EmailSelectors from 'myfolder/store/email/selectors/email.selectors';

ngOnInit(): void {
  // don't need to pipe it, the selector already returns what you need
  // notice I didn't write manually "selectChip"
  this.chipSelected$ = this.store.select(EmailSelectors.selectChip);
}

For more information about selectors, I recommend reading the docs