0

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

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

请帮忙

这是我的状态和初始状态：

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

请帮忙。谢谢

4

1 回答 1

0

看起来您没有在任何地方设置“selectedProduitId”。没有它，'getCurrentProductSelected' 将如何返回任何东西。如果我正确理解您的想法，您需要执行以下操作：

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

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

于 2020-01-11T15:03:29.927 回答