I can't display a single entity object with ngrx

Question

Hello I use ngrx and spring boot to display all products. But I can't display one selected product.

My getProductAction et effect work well. This is the result in Redux:

Some help please

This is my state and initialState:

export interface ProduitState extends EntityState<Produit>{
  isLoading: boolean;
  selectedProduitId: any;
  error: any;
  produits: any;
  searchQuery: string;
}

enter image description here

export const produitAdapter: EntityAdapter<Produit> = createEntityAdapter<Produit>({
  selectId: (produit: Produit) => produit.id,
  sortComparer: false,
});

export const produitInitialState: ProduitState = produitAdapter.getInitialState({
  isLoading: true,
  selectedProduitId: null,
  error: null,
  produits: [],
  searchQuery: ''
});

export const selectedProduitId = (state: ProduitState) => state.selectedProduitId;
export const selectIsLoading = (state: ProduitState) => state.isLoading;
export const selectError = (state: ProduitState) => state.error;
export const selectSearchQuery = (state: ProduitState) => state.searchQuery;

This my action:

export const getProduitAction = createAction('[Produit] Get Produit', props<{produitId: string}>());

const produitPayload = props<{produit: Produit}>();

export const getProduitSuccessAction = createAction('[Produit] Get Produit Success', produitPayload);

This is my reducer:

on(ProduitActions.getProduitAction, (state, {produitId}) => ({
    ...state, selectedProduitId: undefined, isLoading: true, isLoaded: false, error: null
  })),

This is my effect:

getProduit$ = createEffect(() =>
    this.actions$.pipe(
      ofType(getProduitAction),
      exhaustMap(action => {
        alert("getProduit Effects "+ action.produitId);
        return this.produitService.getProduit(action.produitId)
          .pipe(
            //tap(res => console.log(res + "TAG EEEEE")),
            map((produit, id) => getProduitSuccessAction({produit})),
            catchError(err => this.handleError(err))
          )
      })
    )
  );

I do this code to get de current selected id:

public produitsState = createFeatureSelector<state.ProduitState>('produit');

  private selectors = state.produitAdapter.getSelectors(this.produitsState);

  private selectCurrentProduitId = createSelector(this.produitsState, state.selectedProduitId);


  private isLoading = createSelector(this.produitsState, state.selectIsLoading);
  private error = createSelector(this.produitsState, state.selectError);
  private searchQuery = createSelector(this.produitsState, state.selectSearchQuery);

I do this code to get de current selected product but it doesn't work:

getCurrentProductSelected() {
    //console.log("ProduitStore: getCurrentProductSelected()");
    //console.log(this.store.select(this.selectCurrentProduitId));
    alert(this.getProducts());
    return combineLatest(
      this.getProducts(),
      this.store.select(this.selectCurrentProduitId),
      (products, selectedId) => selectedId.map(id => {
        alert(id +" getCurrentProductSelected");
        alert(products +" getCurrentProductSelected");
        return products[id];
      })
    );
  }

I try to get the product but I have nothing:

let id = this.route.snapshot.paramMap.get('id');
    this.store.dispatchGetProduitAction(id);
    this.produit$ = this.store.getCurrentProductSelected();
    this.produit$.pipe(
      map(produit =>{
        alert(produit.nom + " this.produit$");
      })
    );

Help please. Thanks

Answer 1

It does not look like you set 'selectedProduitId' anywhere. And without that, how would 'getCurrentProductSelected' return anything. If i understand your idea correctly, you need to do something like this:

on(ProduitActions.getProduitAction, (state, {produit}) => ({
    ...state, selectedProduitId: produit.id
  })),

But it's just a blind guess.