Использовать global или local state в приложении на React?

Question

[yspb]

Подскажите, пожалуйста, где можно почитать про 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. Выглядит тоже не очень.

Где найти баланс?

Comments

[Роман Александрович]

Нужно очень хорошо понимать понадобится ли вам менять состояние только из этого компонента или придется его изменять и из других компонентов. Первое время когда мне надо было изменить состояние из другого компонента я тоже использовал ваш способ но практика показала что это плохой подход. Со временем пришло понимание когда лучше хранить состояние в тэйте компонента а когда лучше вынести его в стор. Думаю и вы со временем это паймете.

Answer 1

[alvvi]

Как насчет MobX?