Javascript-форум (https://javascript.ru/forum/)
-   Библиотеки/Тулкиты/Фреймворки (https://javascript.ru/forum/library-toolkit-framework/)
-   -   React + Redux не обновляется компонент при изменение store (https://javascript.ru/forum/library-toolkit-framework/71390-react-redux-ne-obnovlyaetsya-komponent-pri-izmenenie-store.html)

smegol 15.11.2017 07:23

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;

destus 15.11.2017 08:25

Цитата:

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;
});

smegol 15.11.2017 15:07

Спасибо большое, всё заработало - несколько дней пытался решить!
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 (Сообщение 470104)
третий аргумент это вообще что?))

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


Часовой пояс GMT +3, время: 11:55.