数据未通过容器中的 React-Redux（来自 mapStateToProps）传递到组件视图

Question

I am making a simple example of "React-Redux" implementation. But, it seems that due to some reason I am not getting the value that I should get from store. Also, kindly note that:

• There is no error or warning in Console.

• While doing console.log in "home.js" (inside constructor) the value passed of props displays as undefined .

I don't have any clue why data is not being able to passed. Can someone help me out?

home.js

import React, {Component} from 'react';

class Home extends Component {

  constructor(){
    super();
    console.log("***", this.props);
  }

  render(){
    return (
      <div>
        <p>city: {this.props.city}</p>
        <p>Total Customers: {this.props.no_of_customers}</p>
      </div>
    )
  }
}

export default Home;

homeContainer.js

import {connect} from 'react-redux';
import Home from '../components/home';
import actions from '../redux/actions/index';

mapStateToProps = (state, ownProps) => {
  return {
    city: state.reducer2.city,
    name: state.reducer2.no_of_customers
  }
}

mapDispatchToProps = (dispatch) => {
  return {
    addData(newData){
      dispatch(actions.add_item(newData));
    }
  }
}

export default connect(mapStateToProps, mapDispatchtoProps)(Home);

store.js

import { createStore } from 'redux';
import  rootReducer  from '../reducers/index';

const store = createStore (rootReducer);

export default store;

reducers/index.js

import { combineReducers } from 'redux';
import reducer1 from './reducer1';
import reducer2 from './reducer2';

const rootReducer = combineReducers({reducer1, reducer2});

export default rootReducer;

reducer2.js

const initialState = {
  total_customers: 999,
  city: "chicago"
};

const reducer2 = (state = initialState, action) => {

  switch(action.type){

    case "CHANGE_CITY": {
      return {
        ...state,
        city: "london"
      }
    }

    default: {
      return state;
    }
  }

}

export default reducer2;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import store from './redux/store/index';
import { Provider } from 'react-redux';

ReactDOM.render(<Provider store={store}><App /></Provider>, document.getElementById('root'));

serviceWorker.unregister();

Output:

I cannot find a single issue in the complete code!

Answer 1

Change your code to,

Home.js

constructor(props){
  super(props);
  console.log("***", this.props);
}

When initiating the constructor in the class component. you should call super(props) before any other statement. Otherwise, this.props will be undefined in the constructor.