Question

我第一次使用Ngrx，尽管它相对简单，但在分配给状态时遇到错误。当用户打开应用程序时，他需要输入自己的姓名并提交，下一个屏幕应该显示“问候{{用户名}}”。用户提交后出现此错误-> core.js：6014错误TypeError：对象不可迭代（无法读取属性Symbol（Symbol.iterator）属性）

感谢您的帮助

import { Action } from '@ngrx/store';
import { UserName, WishListItem } from 'src/model/name.model';

export enum AddToStateActionType{
    ADD_NAME = '[ADD_NAME] add name',
    ADD_TO_WISHLIST = '[ADD_TO_WISHLIST] add to wishlist'
}

export class AddWelcomeNameAction implements Action {
    readonly type = AddToStateActionType.ADD_NAME;

    constructor(public payload: UserName){}
}

export class AddToWishList implements Action {
    readonly type = AddToStateActionType.ADD_TO_WISHLIST;

    constructor(public payload: WishListItem){}
}

export type UserAction = AddWelcomeNameAction | AddToWishList ;

<!--Reducer-->

import {AddToStateActionType, UserAction} from './../action/action';
import { UserName, WishListItem } from 'src/model/name.model';

const initialState: any = {
    name: '',
    wishlist: []
};


export function reducer(state: any = initialState, action: any) {
    switch(action.type) {
        case AddToStateActionType.ADD_NAME:
            return [...state, action.payload.name];
        case AddToStateActionType.ADD_TO_WISHLIST:
            return [...state. action.payload.wishlist];
    default:
        return state;
    }
}

<!--AppState-->

import { UserName, WishListItem } from 'src/model/name.model';

export interface AppState {
    readonly username: UserName;
    readonly wishlist: Array<WishListItem> ;
  }

<!--Welcome component-->

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import { Store } from '@ngrx/store';
import { AppState } from '../app.state/app.state';
import * as Actions from '../../action/action';
import {Router} from '@angular/router';
import { UserName } from 'src/model/name.model';

@Component({
  selector: 'app-welcome',
  templateUrl: './welcome.component.html',
  styleUrls: ['./welcome.component.css']
})
export class WelcomeComponent implements OnInit {
  userName: UserName = {name: ''};

  profileForm = new FormGroup({
    userName: new FormControl(''),
  });
  constructor(private store: Store<AppState>, private router: Router) { }

  ngOnInit() {
  }

  onSubmit() {
   this.store.dispatch(new Actions.AddWelcomeNameAction({name: this.profileForm.value}));
   this.router.navigate(['/search']);
  }

}

Answer 1

两种情况下，问题出在您的减速器上。

在您的代码中：

export function reducer(state: any = initialState, action: any) {
    switch(action.type) {
        case AddToStateActionType.ADD_NAME:
            return [...state, action.payload.name];
        case AddToStateActionType.ADD_TO_WISHLIST:
            return [...state. action.payload.wishlist];
    default:
        return state;
    }
}

您错误地使用了传播算子，导致两个问题：

数组扩展运算符：您正在应用数组扩展运算符：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax。

[...state, action.payload.name]; // This is an array

此运算符的工作方式如下：

let a = [1, 2, 3];
let b = 4;
let c = [...a, b]; // Here we will add each item of a and then b resulting in c = [1, 2, 3, 4]

因此，运行时将尝试在状态上“迭代”，但是状态是对象，而不是数组。那是第一个错误。

Reducer返回类型：在默认情况下，您将按预期返回原始状态，但是在两种情况下，您实际上都是在返回数组。

作为一种好习惯，如果您明确指定化简器的返回类型，您将看到TypeScript如何抱怨它。

解决方案： 要修复您的代码，您应该将reducer重写为：

case AddToStateActionType.ADD_NAME:
    // Here you return a copy of state and overwrite the name property.
    return { 
        ...state,
        name: action.payload.name,
    };
case AddToStateActionType.ADD_TO_WISHLIST:
    // Here you return a copy of state and overwrite the wishlist property with the same elements + the new one.
    return {
        ...state,
        wishlist: [...state.wishlist, action.payload.wishlist]
    };

Answer 2

您的状态类型不一致。 initialState是对象，但reducer返回数组。如果您在控制台中尝试此代码，则会得到相同的错误：

const a = {name: "", wishlist: []}
const b = [...a]

TypeError：a不可迭代

Angular NGRX在调度到状态时出错

2 个答案: