Payload in redux is always undefined, although data is available-CodePudding

I have a Next.js application in which I use redux / redux saga.

Although I receive data from the backend (so there is a payload that I can see in the browsers network tab), it is sent to my reducer as undefined. I thought that it might be due to the payload type and set it to any. Still, it doesn't want to work.

Here is my setup (shown in simplified form):

actions.ts

export const getSomeStuff: ActionType<any> = (data: any) => ({
  type: actionTypes.GET_SOME_STUFF,
  payload: data,
});

export const getSomeStuffSuccess: ActionType<any> = (data: any) => ({
  type: actionTypes.GET_SOME_STUFF_SUCCESS,
  payload: data,
});

actionTypes.ts

export const actionTypes = {
  GET_SOME_STUFF: 'GET_SOME_STUFF',
  GET_SOME_STUFF_SUCCESS: 'GET_SOME_STUFF_SUCCESS',
};

reducers.ts

interface customInterface {
  list: any;
}

export const initialState: customInterface = {
  list: null,
};

function reducer(state = initialState, action: ReturnType<ActionType>) {
  switch (action.type) {
    case actionTypes.GET_SOME_STUFF_SUCCESS:
      return {
        list: action.payload,
      };
    default:
      return state;
  }
}

sagas.ts

function* getSomeStuffSaga(action: ReturnType<ActionType>) {
  try {
    const payload: any = yield call(api.getSomeStuff, action.payload);
    yield put(getSomeStuffSuccess(payload));
  } catch (error) {
    console.error(error);
  }
}

function* watchGetSomeStuffSaga() {
  yield takeLatest(actionTypes.GET_SOME_STUFF, getSomeStuffSaga);
}

export default function* sagas() {
  yield fork(watchGetSomeStuffSaga);
}

The api call

  getSomeStuff = (data: any) => {
    http.get(`my/custom/endpoint`) as Promise<any>;
  };

The dispatch

dispatch(getSomeStuff('someStringParametersPassed'));

Simplified payload I get (in the browsers network tab)

{
   "items": [
      {
         "id":"123456789",
         "stuff":{
            "generalStuff": {
               ...
            },
            "basicStuff": {
               ...
            }
         }
      },
   ]
}

CodePudding user response：

I guess you simply forgot to return in the api call:

getSomeStuff = (data: any) => {
      return http.get(`my/custom/endpoint`) as Promise<any>;
  };

:)