Ngrx Angular - 在简单对象上检测到不可序列化的动作

Question

我不明白为什么 ngrx 在我试图向我的 api 发送一个简单的对象时会弹出这个错误，你能给我一些关于 ngrx 的建议以及它拒绝序列化我的对象的原因吗？

我试图将strictActionSerializability为false ，没有错误但没有对象发送到我的 api ......

错误 ：

错误：在“createdPath”处检测到不可序列化的操作

我如何称呼我的行动：

   this.storePath.dispatch(PathActions.createPath({ createdPath }));

在 actions.ts 文件中：

export const createPath = createAction('[BOT/GROUP] CREATE PATH', props<{ createdPath: Path }>());

我的效果：

createPath$ = createEffect(() =>
this.actions$.pipe(
  ofType(PathActions.createPath),
  map(action => action.createdPath),
  exhaustMap((createdPath: Path) =>
    this.pathService.createPath(createdPath).pipe(
      map(createdPath => PathActions.createPathSuccess({ createdPath })),
      catchError(error => of(PathActions.createPathFailure({ error }))))
  )
 )
);

我的对象作为 JSON 发送：

{
"monsterLevel": [],
"monsterQuantity": [],
"monsterCapture": [],
"pathAction": [
    {
        "actions": [
            {
                "order": 1,
                "fightAction": {
                    "isAlone": false
                }
            },
            {
                "order": 2,
                "moveAction": {
                    "direction": [
                        "Right",
                        "Bottom"
                    ],
                    "toGoBank": false,
                    "toBackBank": false
                }
            }
        ],
        "mapPos": "-14;-53"
    },
    {
        "actions": [
            {
                "order": 1,
                "fightAction": {
                    "isAlone": false
                }
            },
            {
                "order": 2,
                "moveAction": {
                    "direction": [
                        "Top",
                        "Right"
                    ],
                    "toGoBank": false,
                    "toBackBank": false
                }
            }
        ],
        "mapPos": "-14;-52"
    },
    {
        "actions": [
            {
                "order": 1,
                "fightAction": {
                    "isAlone": false
                }
            },
            {
                "order": 2,
                "moveAction": {
                    "direction": [
                        "Top",
                        "Left"
                    ],
                    "toGoBank": false,
                    "toBackBank": false
                }
            }
        ],
        "mapPos": "-13;-52"
    },
    {
        "actions": [
            {
                "order": 1,
                "fightAction": {
                    "isAlone": false
                }
            },
            {
                "order": 2,
                "moveAction": {
                    "direction": [
                        "Left",
                        "Bottom"
                    ],
                    "toGoBank": false,
                    "toBackBank": false
                }
            }
        ],
        "mapPos": "-13;-53"
    },
    {
        "actions": [
            {
                "order": 1,
                "moveAction": {
                    "direction": [
                        "Bottom"
                    ],
                    "toGoBank": true,
                    "toBackBank": false
                }
            }
        ],
        "mapPos": "-14;-51"
    },
    {
        "actions": [
            {
                "order": 1,
                "moveAction": {
                    "direction": [
                        "Bottom"
                    ],
                    "toGoBank": true,
                    "toBackBank": false
                }
            }
        ],
        "mapPos": "-14;-50"
    },
    {
        "actions": [
            {
                "order": 1,
                "moveAction": {
                    "direction": [
                        "Bottom"
                    ],
                    "toGoBank": true,
                    "toBackBank": false
                }
            }
        ],
        "mapPos": "-14;-49"
    },
    {
        "actions": [
            {
                "order": 1,
                "moveAction": {
                    "direction": [
                        "Bottom"
                    ],
                    "toGoBank": true,
                    "toBackBank": false
                }
            }
        ],
        "mapPos": "-14;-48"
    },
    {
        "actions": [
            {
                "order": 1,
                "moveAction": {
                    "cellId": 150,
                    "toGoBank": true,
                    "toBackBank": false
                }
            },
            {
                "order": 2,
                "zaapAction": {
                    "destination": "-32,-58",
                    "zaapId": 1,
                    "toBackBank": false,
                    "toGoBank": true
                }
            }
        ],
        "mapPos": "-14;-47"
    }
],
"name": "feef",
"type": 0,
"monsterQuantityMin": 0,
"monsterQuantityMax": 8,
"groupLevelMin": 0,
"groupLevelMax": 999,
"maxPod": 51,
"leaderBank": true
}

使用的类：

export class Path {
  name: string;
  type: number; /* 0 fight , 1 gather */
  maxPod: number=80;
  monsterQuantityMin: number =0;
  monsterQuantityMax: number =8;
  groupLevelMin: number =0;
  groupLevelMax: number=9999;
  isCapture: boolean =false;
  leaderBank: boolean = false;
  captureItem: number;
  monsterLevel?: SpecificMonsterLevel[];
  monsterQuantity?: SpecificMonsterQuantity[];
  monsterCapture?: CaptureMonsterQuantity[];
  pathAction: PathAction[];
}

祝您有美好的一天，感谢您的帮助！

Answer 1

对于纯数据类对象，您可以使用

JSON.parse(JSON.stringify(product))

否则，我建议添加一个toJSON()序列化方法（由 JSON.stringify 自动使用）

public class Foo{
    private _bar:string;

    constructor(){ this._bar='Baz'; }

    get bar():string{return this._bar}

    toJSON() {
      return {bar: _bar};
    }

    static fromJSON(json) {
      ...
    }
}

参考 - Angular 2（或 4）对象序列化

Answer 2

@Andrew Allen 通过字符串化和重新解析我的对象解决了我的问题：

  this.storePath.dispatch(PathActions.createPath({ createdPath: JSON.parse(JSON.stringify(createdPath)) }));