mapStateToProps method is not invoked - reactjs

Question

For some reason my "secondComponent" isn't actually having mapStateToProps invoked at all, even with a console.log() in it and I am actually quite confused as to why this might be. Redux is working perfectly with my "App" component, but without mapStateToProps being called in the child component it's left in the dark.
Hoping someone could help me here!
1: Index.tsx, where I do make sure to have a Provider for the store.
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { Provider } from 'react-redux';
import configureStore from './store';
const store = configureStore;
ReactDOM.render(
<Provider store={store()}>
<App />
</Provider>,
document.getElementById('root')
);
2: My "App" component that works with the redux store without issue.
import * as React from 'react';
import { connect } from 'react-redux';
import { addItemToCart, removeItemFromCart } from './store/cart/actions';
import { Button, Grid } from 'semantic-ui-react';
import { RootState } from './store';
import { SecondComponent } from './components/SecondComponent';
export interface IAppProps {
addItemToCart: typeof addItemToCart,
removeItemFromCart: typeof removeItemFromCart,
userId: number,
selectedItems: number[]
}
export class App extends React.Component<IAppProps> {
onClickAdd() {
this.props.addItemToCart(5);
}
public render() {
return (
<Grid centered>
<SecondComponent/>
</Grid>
);
}
}
const mapStateToProps = (state: RootState) => {
return {
userId: state.cart.userId,
selectedItems: state.cart.selectedItems
};
}
export default connect(
mapStateToProps,
{ addItemToCart, removeItemFromCart }
)(App);
3: The second component that doesn't have "mapStateToProps" invoked at all. :(
import * as React from 'react';
import { RootState } from '../store';
import { connect } from 'react-redux';
import { addItemToInventory, removeItemFromInventory } from '../store/inventory/actions';
import { Item, ItemTypesAvaliable } from '../store/inventory/types';
import { Fragment } from 'react';
import ItemTypeSection from './ItemTypeSection';
import { Grid } from 'semantic-ui-react';
export interface ISecondComponentProps{
removeItemFromInventory?: typeof removeItemFromInventory,
addItemToInventory?: typeof addItemToInventory,
items?: Item[],
itemTypesAvaliable?: ItemTypesAvaliable[]
}
export class SecondComponentextends React.Component<ISecondComponentProps> {
public render() {
let { itemTypesAvaliable } = this.props;
console.log(this.props);
return (
<Grid>
ok?
{itemTypesAvaliable != null ? itemTypesAvaliable.map(individualItemType => {
return <ItemTypeSection itemType={individualItemType} />
}) : <h1>doesn't work</h1>}
</Grid>
);
}
}
const mapStateToProps = (state: RootState) => {
console.log(state);
console.log("no???")
return {
// items: state.inventory.items,
// itemTypesAvaliable: state.inventory.itemTypesAvaliable
};
}
export default connect(
mapStateToProps,
{ addItemToInventory, removeItemFromInventory }
)(SecondComponent);```

Answer 1

Please make sure that you are importing the required instance. In your case, you need the redux connected instance of SecondComponent with the code
Right:
import SecondComponent from <pathToSecondComponentFile>
which is generating through
export default connect(
mapStateToProps,
{ addItemToInventory, removeItemFromInventory }
)(SecondComponent);
if you are importing the component like this
Wrong:
import {SecondComponent} from "<pathToSecondComponentFile>"
then please remove the braces of SecondComponent to get the default instance of export from file.