ngRx 存储 - Reducer 返回未定义 - store.select() 未定义

如何解决ngRx 存储 - Reducer 返回未定义 - store.select() 未定义

这是我第一次使用 ngRx Store 并实现了我的第一个效果..

什么工作正常：

• 与后端通信
• 正在后端执行操作（删除、添加、获取）
• 有效负载从效果到达减速器（已记录以确保）

所以我的问题是我无法从我的减速器中获取数据。 如果我从组件中的商店中选择数据，我会在组件中得到未定义的数据。我点击了效果中的数据，数据肯定会通过。 还记录了减速器中的数据 - 它就在那里。但是当它返回时，它返回 undefined。 Redux Devtools 记录一切正常。最后但并非最不重要的一点.. 状态不会更新，即使是固定值，例如带有 true/false 的布尔值用于加载。

乐码：

// 我未定义的地方

export class ProfileComponent implements OnInit {

  user: any;
  items$: Observable<Product[]>;
  loading$: Observable<boolean>;
  error$: Observable<Error>;
  newItem: Product = {id: 0,name:""};

  constructor(private keycloakService: KeycloakService,private store: Store<ProductState>,private productService: ProductService) { }

  ngOnInit(): void {
    this.productService.setToken(this.keycloakService.getToken());

    this.user = this.keycloakService.getUsername();

    this.items$ = this.store.select(store => store.list);
    this.loading$ = this.store.select( store => store.loading);
    this.error$ = this.store.select( store => store.error);

    this.store.dispatch(new LoadProduct());

    this.items$.subscribe(val => console.log(val));
    this.loading$.subscribe(val => console.log(val));
    this.error$.subscribe(val => console.log(val));
  }

// 减速器

export type Action = Products.All;

const initialState: ProductState = {
  list: [],loading: false,error: undefined
}

const newState = (state,newData) => {
  return Object.assign({},state,newData);
}

export function reducer(state: ProductState = initialState,action: Action) : ProductState{
  console.log(action.type,state);

  switch (action.type) {
    case Products.LOAD_PRODUCT: return { ...state,loading: true};
    case Products.LOAD_PRODUCT_SUCCESS: return newState(state,{list: action.payload,error: undefined});
    case Products.LOAD_PRODUCT_FAILURE: return { ...state,error: action.payload,loading: false};
    case Products.ADD_PRODUCT: return { ...state,loading: true};
    case Products.ADD_PRODUCT_SUCCESS: return { ...state,list: action.payload,loading: false};
    case Products.ADD_PRODUCT_FAILURE: return { ...state,loading: false};
    case Products.REMOVE_PRODUCT: return { ...state,loading: true};
    case Products.REMOVE_PRODUCT_SUCCESS: return { ...state,list: state.list.filter(item => item.id !== action.payload),loading: false};
    case Products.REMOVE_PRODUCT_FAILURE: return { ...state,loading: false};
    default: return state;
  }

非常感谢您的帮助:)

解决方法

您应该使用选择器函数从商店中获取数据：https://ngrx.io/guide/store/selectors

为了快速解除封锁，我敢打赌 {status: "success",skills: ["coding","coding theory"]} 在 var skills = new Bloodhound({ datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.value); },queryTokenizer: Bloodhound.tokenizers.whitespace,remote: { url: "Somedomain" + "post/api/skills",rateLimitBy: 'debounce',rateLimitWait: 500,prepare: function (query,settings) { settings.type = "POST"; settings.data = {query: query,limit: 15}; return settings; },transform: allSkills => $.map(allSkills.skills,movie => ({ value: movie })) },}); 上是未定义的。

试试这个来调试：

.list,.loading,.error

对你来说，我认为它与 state 有关，所以我敢打赌它应该是这样的：

// see how the whole store looks like
this.store.subscribe(state => console.log({ state }));