title: Angular - "TypeError: Cannot freeze" when dispatching an action
body: <p>I'm working on an angular app that uses ngrx store &amp; effects. I get </p>
  
  <blockquote>
    <p>"TypeError: Cannot freeze"</p>
  </blockquote>
  
  <p>error when dispatching an action from my component. I wrote it for a file upload feature. I think that I'm mutating the state but cannot figure out where and how to solve it.
  Here's my detailed code: </p>
  
  <p><code>Actions:</code></p>
  
  <pre><code>export enum FileUploadActionTypes {
      UploadFile = '[File Upload] Upload File',
      UploadFileSuccess = '[File Upload] Upload File Success',
      UploadFileFailure = '[File Upload] Upload File Failure'
  }
  
  export class UploadFile implements Action {
      readonly type = FileUploadActionTypes.UploadFile;
  
      constructor(public payload: any) {}
  }
  
  export class UploadFileSuccess implements Action {
      readonly type = FileUploadActionTypes.UploadFileSuccess;
  
      constructor(public payload: any) {}
  }
  
  export class UploadFileFailure implements Action {
      readonly type = FileUploadActionTypes.UploadFileFailure;
  
      constructor(public payload: any) {}
  }
  
  export type FileUploadActionsUnion = UploadFile | UploadFileSuccess | UploadFileFailure;
  </code></pre>
  
  <p><code>Service:</code></p>
  
  <pre><code>export class FileUploadService {
      constructor(private httpClient: HttpClient) {
  
      }
      uploadFile(file: any): Observable&lt;any&gt; {
          return this.httpClient.post&lt;any[]&gt;('/api-url/', file);
      }
  }
  </code></pre>
  
  <p><code>Effect:</code></p>
  
  <pre><code>@Effect()
  uploadFile$ = this.actions$.pipe(
      ofType&lt;UploadFile&gt;(FileUploadActionTypes.UploadFile),
      mergeMap(action =&gt; this.fileUploadService.uploadFile(action.payload).pipe(
          map(result =&gt; new UploadFileSuccess(result)),
          catchError(error =&gt; of(new UploadFileFailure(error)))
      ))
  )
  </code></pre>
  
  <p><code>Reducer:</code></p>
  
  <pre><code>export interface State {
      fileUploadSuccessResponse: any,
      fileUploadFailureResponse: any
  }
  
  export const initialState = {
      fileUploadSuccessResponse: null,
      fileUploadFailureResponse: null
  }
  
  export const getFileUploadSuccessResponse = state =&gt; state.fileUploadSuccessResponse;
  export const getFileUploadFailureResponse = state =&gt; state.fileUploadFailureResponse;
  
  export function reducer(state: State = initialState, action: FileUploadActionsUnion):State {
      switch(action.type) {
          case FileUploadActionTypes.UploadFile: {
              return {
                  ...state
              }
          }
          case FileUploadActionTypes.UploadFileSuccess: {
              return {
                  ...state,
                  fileUploadSuccessResponse: action.payload
              }
          }
          case FileUploadActionTypes.UploadFileFailure: {
              return {
                  ...state,
                  fileUploadFailureResponse: action.payload
              }
          }
          default: {
              return state;
          }
      }
  }
  </code></pre>