Search code examples
reactjsreduxreact-reduxstate-managementreact-context

react-redux connect giving undefined props


I am working with react-redux for state management and passing state store using provider but I dont know why it is comming as undefined in the consumer part my provider component

  render(){
    return (
        <Provider store = {store} >
            <ApolloProvider client = {client} >
                  <div className="row">
                        <SideBar />
                        <Center />
                        <RightSlidePanel />
                  </div>
          </ApolloProvider>
        </Provider>
    )
  }
}

the RightSLidePanel component

import { connect} from  'react-redux'
 class RightSlidePanel extends React.Component{
  constructor(){
    super();
    console.log("inside connect " + this.props);
  }
//render method here

}
const mapStateToProps = state => {
  return {
      loggedInUser : state.loggedInUser
    }

}
const mapDepatchToProps = dispatch =>{
  return {
    changeIsReduxWorking : answerTrueOrNot =>{
            dispatch({
              type : "CHANGE_REDUX_WORKING_STATUS",
              data : answerTrueOrNot
            });
    }
  }
}
export default connect(
  mapStateToProps,
  mapDepatchToProps
)(RightSlidePanel);

the result of the console.log is coming as undefined.


Solution

  • You are not passing props to super, because of that props is undefined there.

    constructor( props ){
        super( props );
        console.log("inside connect " + this.props);
      }