title: Redux-Saga: TypeError: Cannot read properties of undefined (reading 'data')
body: <p>I was trying to run my Redux app with redux-saga.</p>
  <p>Basically on my <code>store.js</code> I have the following codes:</p>
  <pre><code>import { applyMiddleware, createStore } from &quot;redux&quot;;
  import createSagaMiddleware from &quot;redux-saga&quot;;
  import logger from &quot;redux-logger&quot;;
  
  import rootReducer from &quot;./reducers/rootReducer&quot;;
  import rootSaga from &quot;./sagas/userSagas&quot;;
  
  const sagaMiddleware = createSagaMiddleware();
  
  const middleware = [sagaMiddleware];
  
  if (process.env_NODE_ENV === &quot;development&quot;) {
    middleware.push(logger);
  }
  
  const store = createStore(rootReducer, applyMiddleware(...middleware));
  
  sagaMiddleware.run(rootSaga);
  
  export default store;
  </code></pre>
  <p>My <code>usersApi.js</code> looks something like this:</p>
  <pre><code>import axios from &quot;axios&quot;;
  
  export const loadUsersApi = async () =&gt; {
    await axios.get(&quot;http://localhost:5000/users&quot;);
  };
  </code></pre>
  <p>And here is my <code>userSagas</code>:</p>
  <pre><code>import * as type from &quot;../actionType&quot;;
  
  import {
    take,
    takeEvery,
    takeLatest,
    put,
    all,
    delay,
    fork,
    call,
  } from &quot;redux-saga/effects&quot;;
  
  import { loadUsersSuccess, loadUsersError } from &quot;../actions/userAction&quot;;
  import { loadUsersApi } from &quot;../services/userApi&quot;;
  
  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]);
  }
  </code></pre>
  <p>When I run this on my <code>HomePage.js</code> file where I load and dispatch the data:</p>
  <pre><code>import React, { useEffect } from &quot;react&quot;;
  import { useDispatch, useSelector } from &quot;react-redux&quot;;
  import { loadUsersStart } from &quot;../redux/actions/userAction&quot;;
  
  export default function HomePage() {
    const dispatch = useDispatch();
  
    useEffect(() =&gt; {
      dispatch(loadUsersStart());
    }, [dispatch]);
  
    return (
      &lt;div&gt;
        &lt;h1&gt;Home&lt;/h1&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p>It gave me this error:</p>
  <pre><code>[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 (&lt;anonymous&gt;)
      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)
  </code></pre>
  <p>I am not sure what's causing this error, but even the logger of my app doesn't even show the actions being dispatched.</p>
  <p>Any idea how can I fix this issue?</p>