Object cannot be reset after sending object to NgRx Store

Question

I have a template driven form in my Angular 8 project.

This form uses NgModel to get the data on the click of a button which fires off a function to send that data, along with a few other pre-set values into an Action to send a message via an email service.

The Object:

  // Data for the reply
  public messageResponse = {
  transmissionRequest: {
    arrivalTime: null,
    attachments: [
      {
        contents: null,
        filename: null
      }
    ],
    ccRecipients: null,
    direction: 'OUTBOUND',
    originator: null,
    payload: null,
    recipient: null,
    subject: null,
    type: 'email'
  }
};

The attempted change:

this.messageResponse.transmissionRequest.payload = '';

The action that is dispatched with the message:

this.store.dispatch(new SendReply(this.messageResponse));

I have attempted to change the payload back to an empty string directly after the store dispatch, in a function after the store dispatch, on subscription of the store's success for that message actually being sent via http, and all of these solutions present the following error:

ERROR TypeError: Cannot assign to read only property 'payload' of object '[object Object]'

When I comment out the dispatch function, the payload is able to be changed successfully, with no error.

I am not mutating the store, as I know that cannot be changed. I am only trying to change the data displayed in the view after the message has been sent.

Does dispatching to the store change the permissions of the original object?

How do I get around this?

Answer 1

Creating a new object based off of the old object fixed this.