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