接收错误：在实现基本的react-redux应用程序时调度程序为空

Question

在尝试在我的react-redux应用程序中使用connect方法时，我每次都会收到相同的错误：调度程序为空， 以下是我的应用程序代码的相关部分

//followed by the import statements, action type, action and reducer function 

const CakeContainer = (props) => {
  return (
    <>
      <h3>Number of cakes - {props.numOfCakes}</h3>
      <button onClick={props.buyCake}>Buy Cake</button>
    </>
  );
};

const mapStateToProps = (state) => {
  return {
    numOfCakes: state.numOfCakes,
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    buyCake: () => dispatch(buyCake()),
  };
};

const ContainerCake = connect(
  mapStateToProps,
  mapDispatchToProps
)(CakeContainer);

事实上，我在尝试使用 useSelector 和 useDispatch 钩子实现类似功能时遇到了相同的错误

const HooksCakeContainer = () => {
  const numOfCakes = useSelector((state) => state.numOfCakes);
  const dispatch = useDispatch();
  return (
    <div>
      <h3>Number of cakes - {numOfCakes}</h3>
      <button onClick={() => dispatch(buyCake())}>Buy Cake</button>
    </div>
  );
};

我检查了action类型、action和reducer函数或者import语句是否有问题，但没有发现任何问题，下面是参考代码

import { createStore } from "redux";
import { connect } from "react-redux";
import { useSelector, useDispatch } from "react-redux";
const BUY_CAKE = "BUY_CAKE";
const buyCake = () => {
  return {
    type: BUY_CAKE,
  };
};

const initialCakeState = {
  numOfCakes: 10,
};

const cakeReducer = (state = initialCakeState, action) => {
  switch (action.type) {
    case BUY_CAKE:
      return {
        ...state,
        numOfCakes: state.numOfCakes - 1,
      };
    default:
      return state;
  }
};

const store = createStore(cakeReducer);

我还确保提供者函数已正确导入并渲染，以供参考

import { Provider } from "react-redux";
import {
  store,
  ContainerCake,
  HooksCakeContainer,
} from "./components/AppContainer";
function App() {
  return (
    <Provider store={store}>
      <div className="App">
        <HooksCakeContainer />
        <ContainerCake />
      </div>
    </Provider>
  );
}

Answer 1

我在 store、ContainerCake 和 HooksCakeContainer 的导入语句中发现潜在问题。通常，您从存储文件导入存储，并从各自的文件导入组件。您在哪里导出store？

import {
  store,
  ContainerCake,
  HooksCakeContainer,
} from "./components/AppContainer";