Redux-Saga: TypeError: Cannot read properties of undefined (reading 'data')

Question

I was trying to run my Redux app with redux-saga.

Basically on my store.js I have the following codes:

import { applyMiddleware, createStore } from "redux";
import createSagaMiddleware from "redux-saga";
import logger from "redux-logger";

import rootReducer from "./reducers/rootReducer";
import rootSaga from "./sagas/userSagas";

const sagaMiddleware = createSagaMiddleware();

const middleware = [sagaMiddleware];

if (process.env_NODE_ENV === "development") {
  middleware.push(logger);
}

const store = createStore(rootReducer, applyMiddleware(...middleware));

sagaMiddleware.run(rootSaga);

export default store;

My usersApi.js looks something like this:

import axios from "axios";

export const loadUsersApi = async () => {
  await axios.get("http://localhost:5000/users");
};

And here is my userSagas:

import * as type from "../actionType";

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

import { loadUsersSuccess, loadUsersError } from "../actions/userAction";
import { loadUsersApi } from "../services/userApi";

export function* onLoadUsersStartAsync() {
  try {
    const response = yield call(loadUsersApi);
    if (response.status === 200) {
      yield delay(500);
      yield put(loadUsersSuccess(response.data));
    }
  } catch (error) {
    yield put(loadUsersError(error.response.data));
  }
}

export function* onLoadUsers() {
  yield takeEvery(type.LOAD_USERS_START, onLoadUsersStartAsync);
}

const userSagas = [fork(onLoadUsers)];

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

When I run this on my HomePage.js file where I load and dispatch the data:

import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { loadUsersStart } from "../redux/actions/userAction";

export default function HomePage() {
  const dispatch = useDispatch();

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

  return (
    <div>
      <h1>Home</h1>
    </div>
  );
}

It gave me this error:

[HMR] Waiting for update signal from WDS...
index.js:1 TypeError: Cannot read properties of undefined (reading 'data')
    at onLoadUsersStartAsync (userSagas.js:25)
    at onLoadUsersStartAsync.next (<anonymous>)
    at next (redux-saga-core.esm.js:1157)
    at currCb (redux-saga-core.esm.js:1251)

index.js:1 The above error occurred in task onLoadUsersStartAsync
    created by takeEvery(LOAD_USERS_START, onLoadUsersStartAsync)
    created by onLoadUsers
    created by rootSaga
Tasks cancelled due to error:
takeEvery(LOAD_USERS_START, onLoadUsersStartAsync)

I am not sure what's causing this error, but even the logger of my app doesn't even show the actions being dispatched.

Any idea how can I fix this issue?

Answer 1

You need to return promise from

export const loadUsersApi = () => {
  return axios.get("http://localhost:5000/users");
};

Maybe next time try to use typescript. It will prevent You from similar mistakes