为什么我的组件没有从 Redux Store 接收更新的 props？

Question

我的组件没有从 redux 商店接收道具。我通过 onClick 事件调用 Action，这就是。单击时，Redux Store 中的名称“wrapper”更改为“wrapper slide-menu”，但是，当我执行 console.log() 时，Props 没有更新。 ，但是当我检查 Redux 开发工具时，显示商店已更新。

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

这是我的组件的一部分，它是从 redux 商店更新的控制台日志侧边栏名称。

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

这是我的行动。

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

这是我的 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;

这是我的商店。

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;

我真的很困惑为什么它没有在组件内呈现。 但是，它正在商店中更新。

Answer 1

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

  componentWillReceiveProps(nextProps) {

    const {sidebarname} = nextProps;

    this.setState({sidebarname});
  }

请在您的情况下放入您的相关组件是索引