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; |
Цитата:
Не тестировал, но смысл думаю ясен 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; }); |
Спасибо большое, всё заработало - несколько дней пытался решить!
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; } } }); Цитата:
|
Часовой пояс GMT +3, время: 11:55. |