Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #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;
Ответить с цитированием
  #2 (permalink)  
Старый 15.11.2017, 08:25
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,207

Цитата:
Object.assign( {}, store, store.header.nav[i].active= active )
третий аргумент это вообще что?))

Не тестировал, но смысл думаю ясен
const s_header= Redux.createStore(	(store= d_header, action) =>{
    var newStore;
	switch( action.type ) {
		case ('NAV_ACTIVE_ITEM'): {
			const newNav = store.header.nav.map(item => {
				return Object.assign({}, item, {active: item.id === action.id ? 'active': ''})
			}
			newStore = Object.assign({}, store, {header: {nav: newNav}})
		}
	}
	return newStore;
});
Ответить с цитированием
  #3 (permalink)  
Старый 15.11.2017, 15:07
Аспирант
Отправить личное сообщение для smegol Посмотреть профиль Найти все сообщения от smegol
 
Регистрация: 28.05.2015
Сообщений: 40

Спасибо большое, всё заработало - несколько дней пытался решить!
const s_header= Redux.createStore(	(store= d_header, action) =>{
	var newStore;
	switch( action.type ) {
		case ('NAV_ACTIVE_ITEM'): {
			const newNav = store.header.nav.map( ( item, i ) => {
				return Object.assign({}, item, {active: item.id == action.id ? 'active': ''})
			});

			newStore = Object.assign({}, store, {header: {nav: newNav}})
			return newStore;
			break;
		}
		default:{
			return store;
			break;
		}
	}
});




Сообщение от destus Посмотреть сообщение
третий аргумент это вообще что?))
Я после цикла делал console.log(store) - там было видно что класс active добавился нужному элементу, а потом вот так var store= store; хотел сделать новый объект store - чтобы произошёл ререндер. но так это не работает)
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Не обновляется анимация при добавлении товара в корзину tetra1282 Элементы интерфейса 6 05.04.2016 17:08
Изменение таблицы при низком разрешении экрана soloinnet Элементы интерфейса 4 13.07.2015 19:44
Изменение стиля всех одинаковых классов при наведение(клике) dmitriy39reg jQuery 10 03.02.2015 14:27
Динамическое изменение размеров блока при наведении мыши! Viktor ------- Общие вопросы Javascript 7 05.05.2009 19:13
изменение рисунка в меню при помощи Javasripta Maxim Общие вопросы Javascript 1 05.09.2008 14:59