2

I was trying to load an image in this basic app using Saga, i configured Saga and it seems fine but the image wasn't getting loaded. So I even created abutton to check whether saga is getting called, but it's still not working.

index.js(saga)

import { put, takeLatest, fork, all, takeEvery } from "redux-saga/effects";

const image = ["/Users/anirudhk/Desktop/PBS/src/favicon.ico"];

function* loadImagesSaga() {
  debugger;
  yield put({ type: "LOAD_IMAGES_SUCCESS", data: image });
}

function* loadImages() {
  debugger;
  yield takeEvery("LOAD_IMAGES", loadImagesSaga);
}

export default function* rootSaga() {
  yield all([loadImages()]);
}

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

Actions.js

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

homepage.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;

LoadImages and loadImagesSaga doesn't get called

Anirudh Khanna
  • 99
  • 3

1 Answers1

0

For those who faced similar issue, I had to use useDispatch and useSelector because they actually connect with react-redux. Also, please upgrade you redux and react-redux packages.

Anirudh Khanna
  • 99
  • 3