problem connecting multiple container components to redux store

Question

I'm having trouble connecting my container components to the redux store, I'm not sure exactly where the connection is supposed to happen, whether in the container component or the component that will be dispatching an action. currently, my index.js looks like this

import React from "react";
import reactDOM from "react-dom";
import App from "./app.jsx";
import storeFactory from "./store";
import { Provider } from 'react-redux';

const store = storeFactory();
reactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("app")
);

currently, my store factory function looks like this

import rootReducer from "../reducers";
import { createStore, applyMiddleware } from "redux";
import { fetchProductInformation } from "../actions";

const storeData = {
  productInformation: {}
};

const storeFactory = (initialState = storeData) => {
  applyMiddleware(fetchProductInformation)(createStore)(
    rootReducer,
    localStorage["redux-store"]
      ? JSON.parse(localStorage["redux-store"])
      : storeData
  );
};

export default storeFactory;

my container component is

import SearchBar from '../components/searchbar.jsx';
import Nutrients from "../components/Nutrients.jsx";
import { fetchProductInformation } from '../actions';
import { connect } from 'react-redux';

const newSearch = (props) => (
  <SearchBar
  className="searchbar searchbar_welcome"
  onNewProduct={( name ) => (props.fetchProductInformation(name))}
/>
)

const productInformation = (props) => {
  const { nutrients, name } = props;
  return nutrients.length > 1 ? 
  (
    <div>
      <newSearch />
      <h3>{name}</h3>
      <hr/>
      <Nutrients
        className="nutrientInformation"
        list={nutrients}
      />
    </div>
  )
  : null
}

const mapStateToProps = ({nutrients, name}) => ({
  nutrients,
  name
});

const mapDispatchToProps = dispatch => ({
  fetchProductInformation: name => {
    dispatch(fetchProductInformation(name))
  }
});

export const Search = connect(null, mapDispatchToProps)(newSearch);
export const productInfo = connect(mapStateToProps)(productInformation);

when i run the code i get the following error

Provider.js:19 Uncaught TypeError: Cannot read property 'getState' of undefined
    at Provider.js:19
    at mountMemo (react-dom.development.js:15669)
    at Object.useMemo (react-dom.development.js:15891)
    at useMemo (react.development.js:1592)
    at Provider (Provider.js:18)
    at renderWithHooks (react-dom.development.js:15108)
    at mountIndeterminateComponent (react-dom.development.js:17342)
    at beginWork$1 (react-dom.development.js:18486)
    at HTMLUnknownElement.callCallback (react-dom.development.js:347)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:397)
react-dom.development.js:19814 The above error occurred in the <Provider> component:
    in Provider

Consider adding an error boundary to your tree to customize error handling behavior.
Visit react-error-boundaries to learn more about error boundaries.
Provider.js:19 Uncaught TypeError: Cannot read property 'getState' of undefined
    at Provider.js:19
    at mountMemo (react-dom.development.js:15669)
    at Object.useMemo (react-dom.development.js:15891)
    at useMemo (react.development.js:1592)
    at Provider (Provider.js:18)
    at renderWithHooks (react-dom.development.js:15108)
    at mountIndeterminateComponent (react-dom.development.js:17342)
    at beginWork$1 (react-dom.development.js:18486)
    at HTMLUnknownElement.callCallback (react-dom.development.js:347)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:397)

from the errors shown i dont know exactly what the error is as it seems to be comming from the provider.js..

Answer 1

your code has some bug. here are fixed code.

import SearchBar from '../components/searchbar.jsx';
import Nutrients from "../components/Nutrients.jsx";
import { fetchProductInformation } from '../actions';
import { connect } from 'react-redux';

const newSearch = (props) => (
  <SearchBar
  className="searchbar searchbar_welcome"
  onNewProduct={( name ) => (props.fetchProductInformation(name))}
/>
)

const productInformation = (props) => {
  const { nutrients, name } = props;
  return nutrients.length > 1 ? 
  (
    <div>
      <newSearch />
      <h3>{name}</h3>
      <hr/>
      <Nutrients
        className="nutrientInformation"
        list={nutrients}
      />
    </div>
  )
  : null
}

const mapStateToProps = ({nutrients, name}) => ({
  nutrients,
  name
});

const mapDispatchToProps = dispatch => ({
  fetchProductInformation: name => {
    dispatch(fetchProductInformation(name))
  }
});

export const Search = connect(null, mapDispatchToProps)(newSearch);
export const productInfo = connect(mapStateToProps)(productInformation)

store.js

import rootReducer from "../reducers";
import { createStore } from "redux";

const storeData = {
  productInformation: {}
};

const initialStore = localStorage["redux-store"] ? JSON.parse(localStorage["redux-store"]) : storeData;

const store = createStore(rootReducer, initialStore);

export default store;

index.js

import store from "./store";
...
       <Provider store={store}>
...