При написании приложения react-redux
мне нужно сохранить как приложение, так и состояние пользовательского интерфейса в глобальном дереве состояний. Каков наилучший подход к его оформлению?
Допустим, у меня есть список предметов todo:
{
items: [
{ id: 1, text: 'Chew bubblegum' },
{ id: 2, text: 'Kick ass' }
]
}
Теперь я хочу, чтобы пользователи выбирали и расширяли элементы. Есть, по крайней мере, два варианта, как смоделировать форму состояния:
{
items: [
{ id: 1, text: 'Chew bubblegum', selected: true, expanded: false },
{ id: 2, text: 'Kick ass', selected: false, expanded: false }
]
}
Но это смешивает состояние пользовательского интерфейса (selected
и expanded
) с состоянием приложения. Когда я сохраняю список дел на сервере, я хочу сохранить только состояние приложения, а не состояние пользовательского интерфейса (в реальном приложении приложение, состояние пользовательского интерфейса может содержать состояние модальных диалогов, сообщения об ошибках, статус проверки и т.д.).
Другим подходом является сохранение другого массива для состояния пользовательского интерфейса элементов:
{
items: [
{ id: 1, text: 'Chew bubblegum' },
{ id: 2, text: 'Kick ass' }
],
itemsState: [
{ selected: true, expanded: false },
{ selected: false, expanded: false }
]
}
Затем вы должны объединить эти два состояния при рендеринге элемента. Я могу представить, что вы можете zip
использовать эти два массива в connect
для облегчения рендеринга:
const TodoItem = ([item, itemState]) => ...;
const TodoList = items => items.map(item => (<TodoItem item={item} />));
export default connect(state => _.zip(state.items, state.itemsState))(TodoList);
Но обновления состояния могут быть болезненными, потому что items
и itemsState
должны храниться в синхронизации:
- При удалении элемента необходимо удалить соответствующее itemState.
- При переупорядочивании элементов, itemsState также необходимо переупорядочить.
- Когда список элементов todo обновляется с сервера, необходимо сохранить идентификаторы в пользовательском интерфейсе и выполнить некоторую согласование.
Есть ли другой вариант? Или есть библиотека, которая помогает синхронизировать состояние приложения и пользовательского интерфейса?