React Redux | connect not mapping dispatch to props - reactjs

Question

I am new to react and I am making a little business directory as I'm learning.
I've made a very basic component such as:
BusinessDirectory.js
export class BusinessDirectory extends React.Component {
componentWillMount() {
console.log(this.props);
}
render() {
return (<div><h1>Business Directory</h1></div>)
}
}
const mapStateToProps = state => ({
businesses: state.businesses.items
});
export default connect(mapStateToProps, { fetchBusinesses })(BusinessDirectory);
App.js
import React from "react";
import { Provider } from "react-redux";
import { BusinessDirectory } from "./components/BusinessDirectory";
import store from "./store";
export class App extends React.Component {
render() {
return (
<Provider store={store}>
<BusinessDirectory />
</Provider>
);
}
}
export default App;
store.js
import { createStore, applyMiddleware } from "redux";
import thunk from "redux-thunk";
import rootReducer from "./reducers";
const initialState = {};
const middleware = [thunk];
const store = createStore(
rootReducer,
initialState,
applyMiddleware(...middleware)
);
export default store;
reducers/index.js
import { combineReducers } from "redux";
import businessReducer from "./business.reducer";
export default combineReducers({
businesses: businessReducer
});
reducers/business.reducer.js
import { FETCH_BUSINESS, FETCH_BUSINESSES } from "../actions/types";
const initialState = {
items: []
};
export default function(state = initialState, action) {
switch (action.type) {
case FETCH_BUSINESSES:
return {
...state,
items: action.payload
};
break;
default:
return state;
}
}
business.action.js
import { FETCH_BUSINESSES } from "./types";
export const fetchBusinesses = () => dispatch => {
fetch("http://localhost:5000/businesses")
.then(res => res.json())
.then(data =>
dispatch({
type: FETCH_BUSINESSES,
payload: data.data
})
);
};
The issue I am having is that this.props inside of the BusinessDirectory is an empty object so I cannot call the methods that I am creating. I've tried to do it by doing the mapDispatchToProp but that also doesn't work.

Answer 1

The problem is that in App.js you import the wrong component:
import { BusinessDirectory } from "./components/BusinessDirectory";
will import the so called named export, i.e. what you defined as
export class BusinessDirectory extends React.Component {
This is a class that assumes that "someone" passes the props to it.
On the other hand,
import BusinessDirectory from "./components/BusinessDirectory";
would import the default export, which is the connected component
export default connect(mapStateToProps, { fetchBusinesses })(BusinessDirectory);
i.e. a component that actually takes care of passing the props from redux.