Reactjs 已发送的操作未到达传奇

我试着用Saga在这个基础应用程序中加载一个图像，我配置了Saga，看起来不错，但是图像没有加载。所以我甚至创建了abutton来检查saga是否被调用，但它仍然不起作用

js（saga）

store.js

import React from "react";
import { render } from "react-dom";
import { BrowserRouter as Router } from "react-router-dom";
import "bootstrap/dist/css/bootstrap.min.css";
import App from "./components/App";
import "./index.css";
import configureStore from "./redux/configureStore";
import { createStore, applyMiddleware, compose } from "redux";
import rootReducer from "./redux/reducers/index";
import createSagaMiddleware from "redux-saga";
import "regenerator-runtime/runtime";
import rootSaga from "./redux/saga/index";
import { Provider as ReduxProvider } from "react-redux";

// const store = configureStore();

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; // add support for Redux dev tools

const sagaMiddleware = createSagaMiddleware();

const store = createStore(
  rootReducer,
  composeEnhancers(applyMiddleware(sagaMiddleware))
);

sagaMiddleware.run(rootSaga);

render(
  <ReduxProvider store={store}>
    <Router>
      <App />
    </Router>
  </ReduxProvider>,
  document.getElementById("app")
);

主页.js

import React, { useEffect, useReducer } from "react";
import { loadImages } from "../../redux/actions/actions";
import imagesReducer from "../../redux/reducers/imagesReducer";

function HomePage() {
  const [images, dispatch] = useReducer(imagesReducer, []);

  // useEffect(() => {
  //   dispatch(loadImages());
  // }, []);

  return (
    <div className="jumbotron">
      <h1>Bag</h1>
      <button onClick={() => dispatch(loadImages())}>Click</button>
      {images.map((image) => (
        <img
          src={image.src}
          key={image.src}
          style={{ height: "100px", width: "100px" }}
        ></img>
      ))}
    </div>
  );
}

export default HomePage;

import React，{useffect，useReducer}来自“React”；
从“../../redux/actions/actions”导入{loadImages}；
从“../../redux/reducers/imagesReducer”导入图像还原器；
功能主页（）{
const[images，dispatch]=useReducer（imagesReducer，[]）；
//useffect（（）=>{
//调度（loadImages（））；
// }, []);
返回(
纸袋
分派（loadImages（））}>单击
{images.map（（图像）=>(
))}
);
}
导出默认主页；

---

LoadImages和loadImagesSaga没有被调用

对于那些面临类似问题的人，我不得不使用useDispatch和useSelector，因为它们实际上与react-redux连接。 另外，请升级您的redux和react redux软件包

export function loadImages() {
  debugger;
  return { type: "LOAD_IMAGES" };
}

import React, { useEffect, useReducer } from "react";
import { loadImages } from "../../redux/actions/actions";
import imagesReducer from "../../redux/reducers/imagesReducer";

function HomePage() {
  const [images, dispatch] = useReducer(imagesReducer, []);

  // useEffect(() => {
  //   dispatch(loadImages());
  // }, []);

  return (
    <div className="jumbotron">
      <h1>Bag</h1>
      <button onClick={() => dispatch(loadImages())}>Click</button>
      {images.map((image) => (
        <img
          src={image.src}
          key={image.src}
          style={{ height: "100px", width: "100px" }}
        ></img>
      ))}
    </div>
  );
}

export default HomePage;