Передача state в реакте к предку, возможно ли без глобального хранилища?

Question

[vaskadogana]

Пишу на реакт, есть такой код

var ContentControlPage = React.createClass({
	getInitialState: function() {
		return {
			displayedTransport: TRANSPORT_INFO
			
		}

	},
	
	handleSearch: function(inputValue){
		var searchQuery = inputValue.toLowerCase();
		var newelement = 'false';
		var displayedTransport = TRANSPORT_INFO.filter(function(el){
			var searchValue = el.name.toLowerCase();
			return searchValue.indexOf(searchQuery) !== -1;
		});
		this.setState({
			displayedTransport: displayedTransport,
		})
	},
	fix_it: function(event){
			var displayedTransport = TRANSPORT_INFO;
			for (var i=0; i<displayedTransport.length; i++) {
				displayedTransport[i].fixed = false;
			}
			console.log(displayedTransport);
	},
  	render: function() {
  		
		return(
			<div>
					<FilterForAll updateFilterForAll={this.handleSearch}  />
					<div className="left_sidebar">
						<ul className="transport_data_container"  onClick={this.fix_it}>
							{
								this.state.displayedTransport.map(function(el){
									return <Filtered_Data 
											key={el.id} 
											name={el.name} 
											imagesrc={el.imagesrc}
											/>;
								})	
							}
						</ul>
					</div>
			</div>
		)
	}
});
в классе Filtered_Data, есть еще один класс на который нужно повесить event onClick которое нужно обрабатывать на уровне ContentControlPage, чтобы манипулировать state displayedTransport

Answer 1

[AlexChebanenko]

Дорогой коллега, Вам необходимо из этой компоненты в компоненту Filtered_Data передать в качестве prop-а функцию (назовём её, например, handleClick), которая будет вызываться из дочерней компоненты Filtered_Data как this.props.handleClick() (параметры добавить, если нужно). handleClick должна располагаться в родительской ContentControlPage и изменять её state (там будет вызов this.setState()).

У некоторых разработчиков это может вызывать сложность в восприятии, и в каком-то смысле это порождает "кашу" и является анти-паттерном. Если такой трюк в Вашем проекте не единичный, рекомендую посмотреть в сторону архитектур Flux или Redux.

Comments

[vaskadogana]

Собственно проблема в том и состоит, что при таком использовании компонента
{
this.state.displayedTransport.map(function(el){
;
return ;
})
}

имеется ввиду функция this.state.displayedTransport.map(function(el){}
использование в ней такой конструкции clickOnStar={this.updatePosition} возвращает ошибку, сейчас не могу вспомнить точно не могу, но на синтаксис ругается.

Насчет redux, вы правы, но толкового мануала найти пока не удается вот например, вроде как основа, тривиальная задача Использование redux и store, как организовать вызов события по изменению состояния store?
поставить язык для приложения и сохранить его в store, чтобы потом запомнить. Но по логике redux, ставить нужно уже исходя из state store.
Делать это внутри класса не годится, так как приложение мультистраничное. Можно конечно написать
if clickHere then setRU и сохранить в loacalstorage
if clickHere then setUA и сохранить в loacalstorage
так у меня получается)))

[vaskadogana]

vaskadogana: делаю вот так Использование redux и store, как организовать вызов события по изменению состояния store?
но остановился на этапе, вызова функции после обновление state в store

[AlexChebanenko]

Давайте ошибку в студию, будем посмотреть. Можно код и скриншот вместе.

Что касается Redux, то я в нём не разбираюсь, но, насколько мне известно, там пишутся "редьюсеры", реагирующие на события изменяющие Store.

В Flux есть диспетчер (Dispatcher), а Store подписывается на событие, при возникновении которого оно изменяется. Правильно ли понял, что Вы спрашиваете, как уведомить компоненты о изменении Store? Для этого в Flux используют библиотеки событий (eventemitter, microevents, pubsub и т.д.). Сам Store становится "источником" событий, а компоненты, в свою очередь, подписываются на них.

[vaskadogana]

вроде разобрался, спасибо

Answer 2

[davidnum95]

Жесть какая то конечно, через props можно.