Подскажите, пожалуйста, где можно почитать про best practice по управлению состоянием в приложении на React?
Идея redux или freezerjs с одним глобальным state это конечно здорово,
но писать на любой чих отдельный reducer или обработчик event с последующей отрисовкой всего приложения как-то выглядит не очень.
Понятно что обход всего дерева будет происходить быстро, и большинство компонент не будет выполнять render по условию shouldComponentUpdate, но разве это красивое решение?
Я написал несколько десятков простых компонент, каждый из которых выполняет свою функцию, и сейчас появилась проблема соединить их в одно приложение.
Использовал такой подход:
Компонент получает props от родителя и генерирует html код.
При различных event от пользователя, компонент меняет свой state и делает очередой render.
Для того чтобы дать родителю знать о том, что изменился state и возможно нужные новые props, я использую callback в который передаю текущий state компонента и название event который его вызвал
const componentWillUpdate = () => {
let { onChange } = props
if (typeof onChange === 'func') => {
onChange({ state: this.state, event: "" })
}
}
и у родителя пишу обработчик данного события
<Component prop1={ } prop2={ } onChange={ (opts) => this.handleComponentChange(opts) }>
При таком подходе можно писать компоненты не задумываясь о каких то глобальных вещах, но получается что мне нужно передавать данные от листьев вверх по дереву, у каждого родителя писать свои обработчики событий, а затем обратно вниз передавать полученные props. Выглядит тоже не очень.
Где найти баланс?
