Показать сообщение отдельно
  #1 (permalink)  
Старый 15.11.2017, 07:23
Аспирант
Отправить личное сообщение для smegol Посмотреть профиль Найти все сообщения от smegol
 
Регистрация: 28.05.2015
Сообщений: 40

React + Redux не обновляется компонент при изменение store
Всем привет!

Изучаю React в связке с Redux, создал компонент навигации в котором должен пристроится класс active пункту меню который был нажат.
Событие долетает до store, там присваивается состояние active нужному пункту, но компонент не обновляется.

Подскажите пожалуйста что в коде не так?

Копонент
class NavHeader extends React.Component{
	constructor(props){
		super(props);
	}

	activeItem(e){
		let id= e.target.getAttribute('data-id');
		this.props.activeItem( id );
	}

	render(){
		let { cls, data }= this.props;
		let itemsNav= [];
		for(let i= 0; data.length > i; i++){
			itemsNav.push(
				<a 
					href={ data[i].href } 
					className={ "nav__link " + data[i].active }
					data-id={ i }
					onClick={ this.activeItem.bind( this ) }>
					{ data[i].name }
				</a>
			)
		}

		return(
			<nav className={ "Nav Nav_" +  cls }>
				{ itemsNav }
			</nav>
		)
	}
}

export default connect(
	( store )=> {
		return{
			data: store.header.nav,
			cls: 'NavHeader'
		}
	},
	( dispatch )=>{
		return{
			activeItem : (id) =>{
				dispatch({
					type : 'NAV_ACTIVE_ITEM',
					id : id
				})
			}
		}
	}
)(NavHeader);


store
const d_header= require("../data/en/header.json");

const s_header= Redux.createStore(	(store= d_header, action) =>{
	switch( action.type ){
		case ('NAV_ACTIVE_ITEM'):
			for(let i= 0; store.header.nav.length > i; i++){
				let active= i == action.id ? 'active' : ''
				Object.assign( {}, store, store.header.nav[i].active= active )
			}
			var store= store;
	}
	return store;
});

export default s_header;
Ответить с цитированием