React, Redux. Cross component interaction
 

Здравствуйте.

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

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

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

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

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

SuperZen, спасибо за пример, однако это совсем не то, что нужно.
У вас особо смысла то и нет обращаться к детям, чтобы добавить новое значение в values, можно сразу это делать из App компонента.

Вот пример моей структуры: https://codesandbox.io/s/fancy-fast-byl5o

Ну сделать тоже самое, обернуть формик в еще один компонент, который слушает изменения в сторе (React.useEffect и т.д.), и вызывать метод как из примера выше... т.е. получается, при первом рендрере берутся данные из пропс, и апдейты через реф....

изменения в формике напрямую не пишут в стор(?)... в стор идет запись после сабмита. зачем тогда дроп писать в стор?