Question

您好，我使用ngrx和spring boot来显示所有产品。但是我无法显示一种选定的产品。

我的getProductAction等效果很好。这是Redux中的结果：

请一些帮助

这是我的状态和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;

这是我的动作

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

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

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

这是我的减速器

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

这是我的效果：

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))
          )
      })
    )
  );

我执行以下代码来获取当前选定的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);

我执行以下代码来获取当前选定的产品，但是它不起作用：

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];
      })
    );
  }

我尝试获取产品，但我什么都没有：

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$");
      })
    );

请帮助。谢谢

Answer 1

您似乎没有在任何地方设置“ selectedProduitId”。除此之外，“ getCurrentProductSelected”将如何返回任何内容。如果我正确理解您的想法，则需要执行以下操作：

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

但这只是一个盲目的猜测。

我无法使用ngrx显示单个实体对象

1 个答案: