SPA + кнопка назад + состояние формы

Question

Я конвертирую многостраничное приложение jsp (mpa) в одностраничное приложение React (спа). В mpa, обратная кнопка работала и форма сохранила свое состояние.

В моем новом приложении React работает кнопка «Назад», но форма не сохраняет свое состояние.

Вопрос: есть ли уловка, чтобы моя форма сохраняла свое состояние после «поддержки» (в спа-центре).

Вот два решения я придумал:

1. Encode вся форма государства в URL. Затем обновляйте историю браузера с обновленным URL-адресом при каждом изменении формы. Но это похоже на огромную боль в заднице.

2. Измените структуру моего приложения так, чтобы отображаемая форма (компонент React) была смонтирована (и просто используйте видимость или свойство css для отображения и скрытия). Но в большом приложении, оставляя каждую страницу, смонтированную в DOM, похоже, может привести к проблемам с производительностью.

Кстати, я использую popstate и историю браузера API для достижения поведения SPA (т.е. я свернул свой собственный маршрутизатор), как описано here.

Надеюсь, кто-то может предложить решение, которое лучше, чем мои два решения. Благодарю.

Answer 1

Используйте Redux, чтобы иметь магазин state, который выходит за рамки любого конкретного компонента. Затем в вашем компоненте, как часть процесса подачи формы, dispatch a action с payload всех данных формы. Это должно быть кэшировано по состоянию, а затем, когда компонент перемонтируется вашей навигационной структурой, он должен иметь доступ к этому кешу через Redux s connect function s mapStateToProps. Вы можете повторно заполнить свою форму.

Непонятно из вашего вопроса, отправляете ли вы form традиционным старым способом. Вместо этого я бы использовал e.preventDefault в обработчике и имел все данные формы на state компонента, это можно отправить в магазин Redux, как описано выше, и Ajaxed с superagent или аналогичным. В то же время его можно кэшировать.

Redux: http://redux.js.org

Answer 2

я в конечном итоге использовать что-то похожее на ответ Уайли Кулик с некоторыми изменениями:

1. Я не хочу, чтобы переключиться на Redux для всего одного сценария использования. Поэтому я использовал компонент состояние моего компонента верхнего уровня (т. Е. Компонента выше дерева).

2. Я кэшировал состояние формы на компоненте компонента компонентаWillUnmount и восстановил состояние кеширования на компонентеDidMount.

3. Я передал кешированное состояние в качестве опоры от более высокого компонента к дочернему компоненту.

Это оказалось очень маленьким количеством кода и до сих пор работает как шарм.