|
React, Redux. Cross component interaction
Здравствуйте.
Есть компонент Layout, который рендерит 2 компонента: UserList и OrderCreatePage, эти два компонента подключены к хранилищу Redux.
Нужно сделать так, чтобы пользователя из компонента UserList можно было добавить в заказ drag and drop'ом.
Компонент OrderCreatePage рендерит форму заказа с помощью библиотеки Formik. Эта библиотека хранит свое состояние в изолированном хранилище, однако отследить изменение состояния все таки можно.
Подскажите, пожалуйста, как правильно решать подобные задачи?
Мое решение:
При дропе пользователя в компонент заказа новый пользователь добавляется в хранилище, после чего компонент OrderCreatePage забирает его из хранилища и передает как props в Formik, что вызывает rerender формы.
Чтобы текущие данные формы, на момент дропа пользователя, не были утеряны слушаю изменения состояния Formik и в случае изменения данных формы записываю их в хранилище OrderCreatePage, что вызывает ререндер Formik'а.
Мое решение мне крайне не нравится по нескольким причинам:
- очень много лишних перерисовок;
- иногда все же возникают ошибки (причину не выяснил до сих пор);
- само решение - костыль.
|
