Why my Component is not receiving updated props from Redux Store?

Question

My Component is not receiving the props from the redux store. I am calling the Action by an onClick event which is this. On Click the name "wrapper" is changed to "wrapper slide-menu" in the Redux Store, however, the Props are not updating when I do console.log(). , but when I check Redux dev tools, the store is shown to be updated.

<a onClick={ ()=> this.props.setName("wrapper")} ><i className="zmdi zmdi-menu ti-align-right"></i></a>

This is a part of my Component which is console logging siderbarname which is updated from the redux store.

import React, { Component } from "react";
import "../App.css";
import { Link } from "react-router-dom";
class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      sidebarname: this.props.sidebarname
    };
  }

  render() {
    const sidebarName = this.props.sidebarname;
    console.log("sidebarname is " + sidebarName);
    console.log(this.props);

This is my Action.

import { connect } from "react-redux";
import * as Actions from "./indexActionTypes";
import App from "../../_layouts";

const mapStateToProps = state => ({
  sidebarname: state.sidebarReducer.sidebarname
});

const mapDispatchToProps = dispatch => ({
  setName: sidebarname => {
    //console.log('setName is called');
    //console.log('togglemargin is'.togglemargin);
    if (sidebarname !== "wrapper slide-menu") {
      dispatch({
        type: Actions.TOGGLE_SIDEBAR,
        sidebarname: sidebarname
      });
    }

    if (sidebarname === "wrapper") {
      console.log("this is called if2");
      dispatch({
        type: Actions.TOGGLE_SIDEBAR,
        sidebarname: "wrapper slide-menu"
      });
    }
  }
});

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(App);

And this is my Reducer.

import * as Actions from "../../actions/indexToggle/indexActionTypes";

//const sidebarname = "wrapper slide-menu";
let initialState = { sidebarname: "wrapper" };

const sidebarReducer = (state = initialState, action) => {
  switch (action.type) {
    case Actions.TOGGLE_SIDEBAR:
      console.log("reducer called");
      console.log(state);
      //console.log('action',action);
      return Object.assign({}, state, {
        sidebarname: action.sidebarname
      });
    default:
      return state;
  }
};
export default sidebarReducer;

This is my Store.

import { createStore, applyMiddleware, compose } from "redux";
import thunk from "redux-thunk";
import rootReducer from "../reducers/rootreducer";

//const  initialState = {};

const middleware = [thunk];
const store = createStore(
  rootReducer,
  compose(
    applyMiddleware(...middleware),
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
  )
);
export default store;

This is my App.js File.

import React, { Component } from 'react';
import './App.css';
import { Provider } from 'react-redux';
import store from './store/store';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import App from './actions/indexToggle/indexActions';
import FirstDashboard from './_layouts/views/firstDashboard';
import SecondDashboard from './_layouts/views/secondDashboard';
import ThirdDashboard from './actions/dashboardToggle/thirdDashboardToggleAction';
import FourthDashboard from './_layouts/views/fourthDashboard';
class Main extends Component {
  render() {
    return (
        <Provider store={store}>
          <Router>
              <div>
                     <App />
                     <Route path='/overview1' exact strict component={FirstDashboard} />
                     <Route path='/overview2' exact strict component={SecondDashboard} />
                     <Route path='/overview3' exact strict component={ThirdDashboard} />
                     <Route path='/overview4' exact strict component={FourthDashboard} />
              </div>
          </Router>
        </Provider>
    );
  }
}

export default Main;

I am really getting confused why it is not rendering inside the component. However, it is getting updated in the store.

Answer 1

@codemt Please add below method in your code it will receive the updated props

  componentWillReceiveProps(nextProps) {

    const {sidebarname} = nextProps;

    this.setState({sidebarname});
  }

Please put inside your relative component in your case is Index