将多个容器组件连接到 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")
);

目前，我的商店工厂功能如下所示

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

将多个容器组件连接到 redux 存储时出现问题

problem connecting multiple container components to redux store

javascript

reactjs

redux

react-redux

connect