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

【问题标题】：Ngrx Angular - Detected unserializable action at simple objectNgrx Angular - 在简单对象上检测到不可序列化的动作
【发布时间】：2020-03-06 08:56:07
【问题描述】：

我不明白为什么在我尝试向我的 api 发送一个简单的对象时，ngrx 会弹出这个错误，你能给我一些关于 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[];
}

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

【问题讨论】：

无法复制 - 请参阅 stackblitz demo。
您将它用作 json 对象，也许我的问题来自我的 Path 类？ PS：我编辑了我的帖子以添加我使用的类
抱歉，今天早上我的速度很慢...stackblitz 现在正在重新制作，忘记打开检查。是的，似乎是由于类...我建议在 Path 类中添加一个序列化方法
关注点分离...我不认为ngrx 有责任序列化传递给动作的内容。人们总是会尝试传递奇怪的东西……比如组件。
我成功了！只是在我的对象上缺少一个道具，这件事使它起作用：{ createdPath: JSON.parse(JSON.stringify(createdPath)) }

标签： javascript angular typescript ngrx

【解决方案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 (or 4) object serialization

【讨论】：

再次感谢您的帮助！

【解决方案2】：

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

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

【讨论】：