Problem connecting component to Redux store

Question

I am having trouble connecting my HomePage(child of App component) component to the Redux store. On componentDidMount => I attempt to call connect at the bottom of my file and pass through as a second argument the function that I have imported from my action creator file that makes a fetch to my backend for data to be set in the React store. However, I am receiving and error that says the defined & imported function "is not a function". I cannot seem to get past my componentDidMount call. I'm also unable access the store from this component.

I have tried dispatching an action straight from my component. I have used debugger in every function that gets called (though I don't make it past the ComponentDidMount. I also tried using withRouter to wrap my connect inside.

*** Action Creator File ***

export const getSectors = ticker => {
  return dispatch => {
    fetch("http://localhost:3000/quote/sectors")
      .then(response => response.json())
      .then(data => dispatch({ type: "GET_SECTORS", data }));
  };
};
******************************************************************

*** HomePage Component File ***

import React from "react";
import styled from "styled-components";
import { connect } from "react-redux";
import { getSectors } from "../redux/actions";

export class HomePage extends React.Component {
  componentDidMount() {
    // debugger;
    this.props.getSectors("test");
  }

  render() {
    debugger;
    return (
      <HomePageWrapper>
        <div className="main">
          <div className="leftSide">
            <div> Mini Prof Card</div>
            <div>Leaderboard Card</div>
            <div>Trending news #</div>
          </div>
          <div className="feed"> two </div>
          <div className="rightSide"> three </div>
        </div>
        {/* <div className="footer">footer</div> */}
      </HomePageWrapper>
    );
  }
}

const mapStateToProps = state => {
  return { state };
};

export default connect(
  mapStateToProps,
  { getSectors }
)(HomePage);

*** Client Side Error Message

TypeError: this.props.getSectors is not a function

HomePage.componentDidMount
src/containers/HomePage.js:80
  77 | export class HomePage extends React.Component {
  78 |   componentDidMount() {
  79 |     // debugger;
> 80 |     this.props.getSectors("test");
  81 |   }
  82 | 
  83 |   render() {




23 stack frames were collapsed.
(anonymous function)
src/redux/actions.js:43
  40 |   })
  41 |     .then(r => r.json())
  42 |     .then(data => {
> 43 |       dispatch({ type: "UPDATE_USER", data });
     | ^  44 |     });
  45 | } else {
  46 |   return { error: "not found" };



I was expecting to hit my debugger in my action creator file but never got there.```

Answer 1

You are exporting both the original component and the connected component.

You are likely importing the un-connected component, such as import { HomePage } from "./this-file" but what you want to use is the default export.

import HomePage from "./this-file" will import the default export which is the component that is wrapped with connect .

I would recommend not exporting the HomePage component at all if not needed to avoid this issue. Or name it something such as HomePageBase or UnconnectedHomePage so it's easy at a glance to see it's not the correct component.