Alllstars :
i don't get why ngrx pop this error while i'm trying to send to my api a simple object, could you give me some advice about ngrx and the reason why it refuse to serialize my object ?
I tried to put strictActionSerializability
to false
, no error but no object sent to my api...
Error :
Error: Detected unserializable action at "createdPath"
How i call my action :
this.storePath.dispatch(PathActions.createPath({ createdPath }));
In actions.ts file :
export const createPath = createAction('[BOT/GROUP] CREATE PATH', props<{ createdPath: Path }>());
And my effect :
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 }))))
)
)
);
My object sent as 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
}
Class used:
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[];
}
have a good day, and thanks for your help !
Andrew Allen :
For a pure data class object you can use
JSON.parse(JSON.stringify(product))
Otherwise, I suggest adding a toJSON()
serialization method (which is automatically used by 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) {
...
}
}
Reference - Angular 2 (or 4) object serialization