MapStateToProps doesn't call componentWillRecieveProps - reactjs

Question

I am using react-redux to manage states between 3-4 Components. I have 4 Components which act as Pages, whenever one is selected an action calls the reducer to update the selected Tab on the navbar. Simple enough.
I have done everything correctly, it works fine till the point where I can access the state in the mapsStateToProps const in the NavbarComponent but it doesn't re-render the Component. I have tried calling componentWillRecieveProps lifecycle method, but it isn't being called.
SideNavbarComponent
import React, { Component } from 'react';
import { Nav, NavItem } from 'react-bootstrap';
import { connect } from 'react-redux';
class SideNavComponent extends Component {
// Is not called
componentWillReceiveProps(nextProps) {
console.log(nextProps);
}
render() {
// logs undefined
console.log(this.props.key);
return (
<Nav bsStyle="pills" stacked activeKey={this.props.key}>
<NavItem disabled eventKey={1}>Home</NavItem>
<NavItem disabled eventKey={2}>Device</NavItem>
<NavItem disabled eventKey={3}>Transformations</NavItem>
<NavItem disabled eventKey={4}>Graphs</NavItem>
</Nav>
);
}
}
const mapStateToProps = (state) => {
const { key } = state.sideNav;
// I can access via key here
return { key };
};
export default connect(mapStateToProps)(SideNavComponent);
Reducer
const INITIAL_STATE = {
key: null
};
export default (state = INITIAL_STATE, action) => {
switch (action.type) {
case 'changed_link':
return { ...state, key: action.payload };
default:
return state;
}
};
Action
export const linkChange = (key) => {
return {
type: 'changed_link',
payload: key
};
};
Edit
I call the action (linkChange) in each of the 4 Components which act as Pages. One of them is below:
DeviceComponent
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import { Col, Well } from 'react-bootstrap';
import axios from 'axios';
import _ from 'lodash';
import moment from 'moment';
import { linkChange } from '../../actions';
class DeviceComponent extends Component {
state = {
device: {}
};
componentDidMount() {
axios.get(`http://localhost:3000/api/device/${this.props.match.params.id}`)
.then(res => {
this.setState({ device: res.data });
})
.catch(err => {
console.log(err);
});
this.props.linkChange(2);
}
render() {
const { device } = this.state;
const battery = _.values(device.battery);
const generator = _.values(device.generator);
const Timestamp = moment(device.timestamp).format('dddd, MMMM Do YYYY, h:mm:ss a');
return (
<div>
<Col md={7} sm={12}>
<h3>Device ID: {device.id} ({device.location})</h3>
<hr />
<div style={{ marginTop: 40 }}>
<Link className="btn btn-lg btn-success btn-block" to="/transform">Transformations</Link>
<Link className="btn btn-lg btn-warning btn-block" to="/graph">Graphs</Link>
</div>
<div style={{ marginTop: 70 }}>
<Link className="btn btn-lg btn-primary btn-block" to="/">Home</Link>
</div>
</Col>
<Col md={5} sm={12}>
<Well>
<ul>
<li>ID: {device.id}</li>
<li>Location: {device.location}</li>
<li>Timestamp: {Timestamp}</li>
<li>
Battery:
<ul>
<li>Temperature: {battery[0]}</li>
<li>Current: {battery[1]}</li>
<li>Voltage: {battery[2]}</li>
</ul>
</li>
<li>
Generator:
<ul>
<li>Temperature: {generator[0]}</li>
<li>Current: {generator[1]}</li>
<li>Voltage: {generator[2]}</li>
</ul>
</li>
</ul>
</Well>
</Col>
</div>
);
}
}
export default connect(null, { linkChange })(DeviceComponent);

Answer 1

key is a reserved word in React - renaming it will resolve the issue