Показать сообщение отдельно
  #1 (permalink)  
Старый 04.08.2020, 22:14
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,791

React, Redux. Cross component interaction
Здравствуйте.

Есть компонент Layout, который рендерит 2 компонента: UserList и OrderCreatePage, эти два компонента подключены к хранилищу Redux.
Нужно сделать так, чтобы пользователя из компонента UserList можно было добавить в заказ drag and drop'ом.

Компонент OrderCreatePage рендерит форму заказа с помощью библиотеки Formik. Эта библиотека хранит свое состояние в изолированном хранилище, однако отследить изменение состояния все таки можно.

Подскажите, пожалуйста, как правильно решать подобные задачи?

Мое решение:
При дропе пользователя в компонент заказа новый пользователь добавляется в хранилище, после чего компонент OrderCreatePage забирает его из хранилища и передает как props в Formik, что вызывает rerender формы.
Чтобы текущие данные формы, на момент дропа пользователя, не были утеряны слушаю изменения состояния Formik и в случае изменения данных формы записываю их в хранилище OrderCreatePage, что вызывает ререндер Formik'а.

Мое решение мне крайне не нравится по нескольким причинам:
- очень много лишних перерисовок;
- иногда все же возникают ошибки (причину не выяснил до сих пор);
- само решение - костыль.
Ответить с цитированием