将多个容器组件连接到 redux 商店的问题

Question

我在将容器组件连接到 redux 存储时遇到问题，我不确定连接应该发生在哪里，无论是在容器组件中还是在将分派操作的组件中。 目前，我的 index.js 看起来像这样

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")
);

目前，我的商店工厂 function 看起来像这样

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;

我的容器组件是

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);

当我运行代码时，出现以下错误

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)

从显示的错误中，我不确切知道错误是什么，因为它似乎来自provider.js ..

Answer 1

你的代码有一些错误。 这里是固定代码。

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}>
...