Angular 9 NgRx - Обнаружено несериализуемое действие при загрузке файла

Question

Мне нужно загрузить файл, используя Ngrx. Мне не нужно сохранять файл в Магазине, но мне нужно передать его между действиями, эффектами и, наконец, службами для управления некоторыми данными, которые API отправляют мне обратно.

Когда я выбираю файл и затем нажимаю на На кнопку загрузки я получаю Ошибка: Обнаружено несериализуемое действие для параметра файла.

Я пробовал много решений, таких как разбор и разбивку строк, расширение объекта и так далее, но никто не работал. Единственное решение на данный момент - установить для параметра strictActionSerializability значение false, но это не решение .

Я воспроизвел ситуацию на этом стеке: https://stackblitz.com/edit/angular-it6q41

У кого-нибудь есть предложения, как это решить?

Answer 1

Я не уверен, что управлять File контентом в NgRx магазине - это хорошая практика, однако, если вы хотите go таким образом, вы можете извлечь File контент как base64, а затем передайте его действию:

onSubmit() {
    const file = this.uploadForm.get('file_store').value;
    const signature = file.type;
    const partner_id = this.partner_id;

    const reader = new FileReader();
    reader.onloadend = (e) => {
      this.store.dispatch(
        LoadActions.uploadFile({ content: reader.result, signature, partner_id })
      );
    }
    reader.readAsDataURL(file);
  }

Примечание : здесь я немного изменил вашу подпись действия uploadFile, со свойством content вместо dataForm, чтобы было больше ясно.