TabMenu with Redux
Posted: 07 Jan 2019, 15:10
Hi,
is there a way to use TabMenu with Redux store instead of the local component state? The following code works when you are navigating with the TabMenu, but it does not work if you call updatePage action from somewhere else in the application. Is it even possible and what is the value that should be stored in the store?
The problem that I'm trying to solve is:
- If I navigate to a different page using some other method than TabMenu, then a wrong tab is highlighted.
- If I reload some page then the first TabMenu option is always highlighted, even if I am in a different page.
is there a way to use TabMenu with Redux store instead of the local component state? The following code works when you are navigating with the TabMenu, but it does not work if you call updatePage action from somewhere else in the application. Is it even possible and what is the value that should be stored in the store?
The problem that I'm trying to solve is:
- If I navigate to a different page using some other method than TabMenu, then a wrong tab is highlighted.
- If I reload some page then the first TabMenu option is always highlighted, even if I am in a different page.
Code: Select all
import React, { Component } from "react";
import { withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
import { TabMenu } from 'primereact/tabmenu';
import { updatePage } from '../actions/mainNavigation';
class MainNavigation extends Component {
constructor() {
super();
this.state = {
items: [
{ label: "Dashboard", icon: 'pi pi-fw pi-home', command: () => { this.props.history.push(`/dashboard`) } },
{ label: "Devices", icon: 'fa fa-hdd', command: () => { this.props.history.push(`/devices`) } },
]
};
}
render() {
return (
<TabMenu model={this.state.items} activeItem={this.props.activeItem} onTabChange={(e) => { this.props.updatePage(e.value) }} />
)
}
}
const mapStateToProps = (state) => {
const activeItem = state.mainNavigation.activeItem || null;
return { activeItem };
}
export default withRouter(connect(mapStateToProps, { updatePage })(MainNavigation));