способ синхронизации состояний двух загрузчиков файлов в React - PullRequest
Новая
       19

способ синхронизации состояний двух загрузчиков файлов в React

0 голосов
/ 27 марта 2020

Это более архитектурный вопрос. Но я изо всех сил пытаюсь решить последние три дня, поэтому буду очень признателен за любые советы.

Существует приложение React, состоящее из двух частей: большой формы, которая среди прочего содержит поле для загрузки файла (я используйте FilePond, но на самом деле это не актуально, и я могу использовать любой другой загрузчик файлов или просто встроенное поле file).

Вторая часть - это окно чата (я использую Botkit, но опять же не важно). Поле загрузки файла может быть задано либо через форму, либо ботом через окно чата. В последнем случае бот покажет свое поле загрузки файла в окне чата.

Все поля синхронизируются через Redux, и их состояние сохраняется в хранилище Redux. Для поля загрузки файлов хранится ответ сервера (с именем файла, который хранится на стороне сервера), поэтому, когда пользователь отправляет форму, мы можем получить информацию, включая все загруженные файлы.

Проблема в том, что я не могу понять, как синхронизировать два поля загрузки файлов.

Вот код для компонента поля формы (очищен от всех ненужных подробностей): 

import React from 'react';
import { FilePond } from "react-filepond";
import { setEField } from 'redux/actions/ext_form_actions'
import { useSelector, useDispatch } from "react-redux";

const FileUpload = ({ field_name }) => {
  const dispatch = useDispatch();
  const value = useSelector((state) => state.file_upload_value)
  const fileChangeHandler = (files) => {
    dispatch(setEField({ field_name: field_name, owner: owner, value: forRedux }));
  }
  const fileRemover = (error, file) => {
    dispatch(setEField({ field_name: field_name, owner: owner, value: [] }));
  }
  const serverConfig = { url: './upload', }
  return (
    <div className='fileUploader' >
      <FilePond
        name={field_name}
        files={value}
        server={serverConfig}
        onupdatefiles={fileChangeHandler}
        onremovefile={fileRemover}
      />
    </div>
  );
}

export default FileUpload

проблема в том, что когда value устанавливается внешне (через окно чата ), компонент реагирует на это при добавлении нового файла и запускает fileChangeHandler, который, в свою очередь, устанавливает значение в хранилище, которое переопределяет значение, установленное ботом.

PS: setEField это просто действие, которое устанавливает значение поля формы.

...