Как обрабатывать состояние пользовательского интерфейса в Redux/React - Redux-UI?

Question

Я изучаю, как лучше всего хранить состояние пользовательского интерфейса. Должен ли я использовать что-то вроде Redux-UI ( https://github.com/tonyhb/redux-ui) для хранения / управления состоянием пользовательского интерфейса? или я должен создать свои собственные действия / редукторы для пользовательского интерфейса?

Кроме того... когда я сохраню состояние пользовательского интерфейса, как мне убедиться, что браузер обновлен, у меня все еще точно такое же состояние страницы? Как обычная веб-страница, включая данные, взятые с сервера.

У меня есть Redux с Thunk среднего износа и магазин. Я работал с React последние пару месяцев.

Спасибо! Куинтон

Answer 1

Наша команда потратила на это несколько дней. Причины, по которым нам нужны состояния пользовательского интерфейса, вместо того, чтобы помещать эти состояния в дерево состояний Redux, могут быть следующими:

1. Эти состояния пользовательского интерфейса относятся только к очень небольшому количеству компонентов. Но все же иногда нам нужно делить эти состояния между ними. Например, кнопка для управления модалом, они оба должны читать / записывать состояние "isModalOpen".

2. Эти состояния не являются данными, это предпочтения пользовательского интерфейса, и их можно сбросить до значения по умолчанию при размонтировании компонента. Сохранение их в единственном хранилище Redux звучит как загрязнение дерева состояний.

Мы попытались:

1. Создание отдельного редуксного дерева состояний только для пользовательского интерфейса.
2. Добавьте основную ветвь, скажем, "state.UI" для всех состояний "UI".

Однако все это подразумевает необходимость использования / реализации собственного промежуточного программного обеспечения, действий и редукторов. Жесткий.

В конце я сделал реакцию-обеспечь-государство. Это работает очень хорошо. Единственным недостатком этого является то, что вы не можете легко видеть состояния пользовательского интерфейса, такие как состояния в дереве Redux в консоли браузера. И вы можете обновлять состояния только через пользовательский интерфейс (обратные вызовы событий действий пользователя). Это справедливо, мы говорим о UI.