Давайте представим следующие компоненты в приложении React / Redux:
- AllFiles , в котором перечислены все когда-либо отправленные файлы и всегда отображаются на левой панели
- Папка , которая содержит список файлов и один FileUpload компонент для добавления файлов в эту папку.
- FileUpload , который можно использовать где угоднона платформе и несколько раз на одной странице и просто загрузите новый файл
Какой правильный шаблон для FileUpload в:
- отправить файл с помощью асинхронного API (реагировать-thunk)
- обновить хранилище, чтобы вызвать AllFiles рендер
- предупреждает компонент «Папка» о том, что новый файл загружен
Первым предположением было бы попробовать dispatch(uploadFile()).then(onFileUploaded) в FileUpload компонент. Папка будет предупреждена обратным вызовом onUploaded, переданным компоненту FileUpload . Затем обновите его внутреннее состояние, добавив новый загруженный файл.
Но отправка и обещания не могут быть объединены.
Опция 1:
Оба компонента Folder и FileUpload не должны использовать хранилище для хранения своих данных. Но они должны использовать для этого свое внутреннее состояние.
Тогда «FileUpload» не должен отправлять действие, а просто вызывает асинхронное действие с обещанием.
Как обновить хранилище для AllFiles в этой ситуации? В FileUpload компонент после обещания?
Опция 2:
Все компоненты должны находиться в своем состоянии в хранилище.
Затем, как спроектировать хранилище так, чтобы на одной странице было несколько экземпляров FileUpload ?