Почему компонент не слушает хранилище?

Question

[vaskadogana]

Почему после обновления хранилища react не реагирует?
компонент к хранилищу подключен


массив transport_list - обновляется, но обновление идет из компонента прямой связи с текущим не имеющим. (вроде третий уровень вложенности, тащить его не хочу, я ж редукс подключил))
подключаю через редукс connect
реагирует только после событий типа onClick или onChange. мне нужно именно на сторе.
Единственно решение как подписать нагуглил только subscribe, но как вызвать ререндер компонента опять таки непонятно. Везде примеры из серии вот тут на инпут повесили onChange и передали событие предку/потомку вызвали ререндер. Реагирует на новую инфу только после событий которые вызываю по схеме onChange/onClick

на

componentWillReceiveProps(nextProps){
		if(this.props.transport_list !== nextProps.transport_list){
			console.log('did update', this.props.transport_list)
		}
	}

не реагирует. Хотя через реактдевтулс видно, что значение новое.
Неделю не могу побороть
Собственно интересует как вызвать ререндер.

Comments

[Андрей Антропов]

Слишком мало информации конкретно по коду, пока могу предположить что пропс который изменяется мутируется на внутреннем уровне и рендеринг отсекается через scu

Answer 1

[vaskadogana]

Проблема была из-за того, что название функции (action) и ключа совпадало.

Answer 2

[Frozen Coder]

Везде примеры из серии вот тут на инпут повесили onChange и передали событие предку/потомку вызвали ререндер.

Не супер специалист по реакту, но вроде как так и надо делать. У вас есть умный компонент, который знает про редакс, в котором и есть коннект. Он общается с store и берет из него то, что нужно себе в state и передает требуемые значения потомкам из своего state вниз. У него глупые дети, которые не знают про редакс и могут только вызывать переданные им из родителя onChange или onClick и поглощают переданные родителем пропсы. А в этих функциях вызывается бросок экшена, который делает запрос на сервер, потом прилетает новый экшен о том, что данные получены или произошла ошибка. Соответствующий Редусер на все эти экшены реагирует изменениями в store. Затем изменения прилетают как nextProps родителю, где в componentWillReceiveProps делается обновление state родителя. В результате срабатывает рекурсивный перерендеринг у родителя и всех его потомков с новыми пропсами. Как-то так.

Answer 3

[Максим]

Предположу 2 ситуации:
1) Как вам уже сказали в комментариях, скорее всего вы "мутируете" массив, а не возвращаете новый. Например, вам не подходит, метод push, чтобы добавить элемент и вернуть новый массив, используйте concat.

2) Если вы подключили компонент (с помощью connect), и не прокидываете props вниз потомку, который в свою очередь не прокидывает эти пропс вашему компоненту, который не работает и находится на 3м уровне, не имея прямой связи... то и работать не должно. Чтобы "не прокидывать", можно использовать context, но вряд ли вам это сейчас нужно. Мне, пока что, context использовать напрямую не приходилось.

Comments

[vaskadogana]

в том то и дело, что возвращаю через
кусок из функции которую вызываю:
return({
type : 'UPDATE_TRANSPORT_LIST',
transport_list: displayedTransport,
});

думаю, может из-за подключения?
export const actionCreators = {
update_Transport_List: update_Transport_List,
fixation: fixation,
};
let IconStarController = connect(
state => ({
fix : state.controlR.fix,
situation : state.controlR.situation
}),
dispatch => bindActionCreators(actionCreators, dispatch)
)(IconStar, ContentControlPage);