So I got this error couple of times now. when trying to pass array of specific type objects to actions in ngrx store from ngrx effects. In my case I want to pass AngularFireUploadTask[] to my action. Previosly I had the same error with User Products is defined in my project. the way I got rid of the issue was to cast the object to products in effect using (as User). the same doesn't seem to work here.
Please help me out understand this issue. the error doesn't give much info. This is my action:
export const loadUploadSuccess = createAction(
'[Upload/API] Load Upload Success',
props<{ upload: AngularFireUploadTask[] }>()
);
This is effect:
init$ = createEffect(() =>
this.actions$.pipe(
ofType(UploadActions.init),
fetch({
run: (action) => {
const uploads: AngularFireUploadTask[] = [];
action.files.forEach((file) => {
uploads.push(this.firebaseStorage.startUpload(file));
});
console.log(uploads);
return UploadActions.loadUploadSuccess({upload: uploads});
},
onError: (action, error) => {
console.error('Error', error);
return UploadActions.loadUploadFailure({ error });
},
})
)
);
And I will include reducer just in case.
on(UploadActions.loadUploadSuccess, (state, { upload }) => {
console.log('yooo', upload);
return uploadAdapter.setAll(upload as UploadEntity[], { ...state, loaded: true });
}),
When I pass empty array to UploadActions.loadUploadSuccess({upload: []}); it works just fine, but when I add the actual object I get the error.
From what I understand this is TypeError so something is wrong with types. I tried to use unknown, any, unknown[] and any[] in action but nothing helps.
So I found a way to solve this issue. Its not a perfect solution, but it gets rid of the error.
https://github.com/ngrx/platform/issues/2404
The issue seems to be caused by immutability checks in ngrx. Once disabling them, the error goes away.
StoreModule.forRoot({},{
runtimeChecks: {
strictStateImmutability: false,
strictActionImmutability: false,
},
}),