Javascript 为什么我的组件没有从Redux商店收到更新的道具？

我的组件没有从redux商店接收道具。我通过onClick事件调用这个动作，就是这样。单击后，Redux存储中的名称“wrapper”更改为“wrapper slide menu”，但是，当我执行console.log（）时，道具不会更新，但是当我检查Redux开发工具时，商店显示为已更新

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

这是我的行动

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);

这是我的减速机

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;

这是我的商店

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;

这是我的App.js文件

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;

import React，{Component}来自'React'；
导入“/App.css”；
从'react redux'导入{Provider}；
从“./store/store”导入存储；
从“react Router dom”导入{BrowserRouter as Router，Route}；
从“/actions/indexToggle/indexActions”导入应用程序；
从“/_布局/视图/FirstDashboard”导入FirstDashboard；
从“/_布局/视图/SecondDashboard”导入SecondDashboard；
从“/actions/dashboardToggle/thirdDashboardToggleAction”导入第三个仪表板；
从“/_布局/视图/FourthDashboard”导入FourthDashboard；
类主扩展组件{
render（）{
返回(
);
}
}
导出默认主；

我真的很困惑为什么它没有在组件内部渲染。

---

但是，它正在商店中更新。

@codemt请在代码中添加以下方法，它将收到更新的道具

  componentWillReceiveProps(nextProps) {

    const {sidebarname} = nextProps;

    this.setState({sidebarname});
  }

---

请将案例中的相关组件放入索引中

const sidebarName=this.props.sidebarName应该是
const sidebarName=this.state.sidebarName请在您的应用商店中注册减速机const reducer=combineReducers（{staticReducer1，staticReducer2}）const store=createStore（reducer，applyMiddleware（中间件））@codemt@atmd我做到了。它尚未进行任何更改。@vaibhavhavsar它已注册。我叫它。从'redux'导入{combinereducer}；从“../sidebarReducer/sidebarReducer”导入sidebarReducer；从“../marginReducer/marginReducer”导入marginReducer；导出默认合并器（{sidebarReducer，}）；确保将默认的导出连接组件添加到react渲染树，而不是普通应用程序组件。您不必在redux中执行此操作。如果连接正确，Redux提供程序将通过store向组件注入道具。
  componentWillReceiveProps(nextProps) {

    const {sidebarname} = nextProps;

    this.setState({sidebarname});
  }