Всем привет!
Изучаю 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;