NgRX store，发出抓取数据

Question

我一直在做一些测试与ngrx存储，但有一些问题:

主要用于从存储中获取信息。

你可以在这里看到我的代码https://github.com/FabioBiao/ngrxtTest

在home.component.ts中，我尝试获取商店的内容。然而，我得到了一个对象，它的名字是商店的，里面是它的内容。

store.pipe(select(getCart)).subscribe((data) => {
console.log('load finish on component');
console.log(data);
if (data && data['shop']) {
console.log(data['shop']);
this.items = data['shop'].items;
}

我希望立即获得商店内的内容，但我需要执行data['shop']来获取商店数据。为了更好地工作，我错过了什么?

我也试过使用这个

this.getItemsList = store.select(getItemsList);

与此选择器:

const shopFeatureState = createFeatureSelector<StoreState>('myshop');
export const getItemsList = createSelector(
shopFeatureState,
state => state.items
);

但是它返回了对象存储。我需要订阅它来获取store对象中的内容。这也是正确的方法吗?

Thanks for the help

Answer 1

您需要添加一个新的选择器selectShopState，它将指向shop状态，然后将其传递给getCart以在此选择器中获得您的状态的实例。

你的选择器文件应该如下所示:

import { StoreState } from "./reducer";
import { createSelector, Store, createFeatureSelector } from "@ngrx/store";
// >>>>> 1- Create the shop selector <<<<<<<
export const selectShopState = createFeatureSelector<StoreState>("shop");
//getting the whole store
export const selectStoreState = (state: StoreState) => state;
export const getStore = createSelector(selectStoreState, (state) => state);
//getting the items from the store state
export const selectStoreItems = (state: StoreState) => state.items;
export const getItemList = createSelector(selectStoreItems, (state) => state);
//getting the cart from the store state
export const selectStoreCart = (state: StoreState) => state.cart;
// >>>> 2- Then pass it here to get the instance of your shop state <<<<<
export const getCart = createSelector(selectShopState, (state) => {
console.log("selector Cart");
console.log(state);
return state;
});

Answer 2

似乎问题在于您的选择器函数，因为它们目前正在返回整个状态。你可以像这样重新定义选择器:

import { StoreState } from './reducer';
import { createSelector, Store, createFeatureSelector } from '@ngrx/store';
//getting the whole store
export const selectStoreState = (state: StoreState) => state;
export const getStore = createSelector(selectStoreState, state => state);
//getting the items from the store state
export const selectStoreItems = (state: StoreState) => state.items;
export const getCartList = createSelector(selectStoreItems, state => state);
//getting the cart from the store state
export const selectStoreCart = (state: StoreState) => state.cart;
export const getCart = createSelector(selectStoreCart, (state) => {
console.log('selector Cart');
console.log(state);
return state;
});