redux-saga api yield 调用有效，但没有返回数据

Question

I am now trying to POST using redux saga and fetch. I'm using creative-tim's material kit as the default template.

The API that you want to execute through the yield call is actually communicate with the server (and the server stores the received value in the DB), but the response is UNDEFINED .

When I tried the code related to the redux-saga in another project, it worked fine, but only in the project with the template. But I don't think that's a problem with the template. The same problem occurred when I tried to communicate with another server. (There was also an error in GET communication using axios, but this only works when fetched.)

my module is shown below,

import { createAction, handleActions } from 'redux-actions';
import createRequestSaga, {
  createRequestActionTypes
} from '../lib/createRequestSaga';
import * as askAPI from '../lib/api/ask';
import { takeLatest } from 'redux-saga/effects';

const INITIALIZE = 'ask/INITIALIZE';
const CHANGE_FIELD = 'ask/CHANGE_FIELD';
const [
  WRITE_ASK,
  WRITE_ASK_SUCCESS,
  WRITE_ASK_FAILURE
] = createRequestActionTypes('ask/WRITE_ASK');

export const initialize = createAction(INITIALIZE);
export const changeField = createAction(CHANGE_FIELD, ({ key, value }) => ({
  key,
  value
}));
export const writeAsk = createAction(WRITE_ASK, ({ name, email, body }) => ({
  name,
  email,
  body
}));

const writeAskSaga = createRequestSaga(WRITE_ASK, askAPI.writeAsk);

export function* writeSaga() {
  yield takeLatest(WRITE_ASK, writeAskSaga);
}

const initialState = {
  name: '',
  email: '',
  body: '',
  ask: null,
  askError: null
};

const ask = handleActions(
  {
    [INITIALIZE]: state => initialState,
    [CHANGE_FIELD]: (state, { payload: { key, value } }) => ({
      ...state,
      [key]: value
    }),
    [WRITE_ASK]: state => ({
      ...state,
      ask: null,
      askError: null
    }),
    [WRITE_ASK_SUCCESS]: (state, { payload: ask }) => ({
      ...state,
      ask
    }),
    [WRITE_ASK_FAILURE]: (state, { payload: askError }) => ({
      ...state,
      askError
    })
  },
  initialState
);

export default ask;

and createRequestSaga is shown below. createRequestSaga.js

import { call, put, fork, delay } from 'redux-saga/effects';
import { startLoading, finishLoading } from '../modules/loading';

export const createRequestActionTypes = type => {
  const SUCCESS = `${type}_SUCCESS`;
  const FAILURE = `${type}_FAILURE`;
  return [type, SUCCESS, FAILURE];
};

export default function createRequestSaga(type, request) {
  const SUCCESS = `${type}_SUCCESS`;
  const FAILURE = `${type}_FAILURE`;

  return function*(action) {
    yield put(startLoading(type)); //LOADING START

    try {
      const response = yield call(request, action.payload);
      console.log(response); //THIS IS UNDEFINED
      yield put({
        type: SUCCESS,
        payload: response.data
      });
    } catch (e) {
      console.log(e); 
      yield put({
        type: FAILURE,
        payload: e,
        error: true
      });
    }
    yield put(finishLoading(type)); //LOADING FINISH
  };
}

and this is api code

export const writeAsk = ({ name, email, body }) => {
  fetch('http://allnewfit.net:4000/api/ask', {
    method: 'POST',
    body: JSON.stringify({ name, email, body }),
    headers: {
      'Content-Type': 'application/json'
    }
  });
};

I expect the output of response to be below,(just response of server)

{
    "fieldCount": 0,
    "affectedRows": 1,
    "insertId": 38,
    "info": "",
    "serverStatus": 2,
    "warningStatus": 0
}

but the actual output is undefined

Where is the problem in the code? Thank you for your help.

Answer 1

You need to return the promise generated by fetch by using return or removing the curly brackets around the fetch:

export const writeAsk = ({ name, email, body }) =>
  fetch('http://allnewfit.net:4000/api/ask', {
    method: 'POST',
    body: JSON.stringify({ name, email, body }),
    headers: {
      'Content-Type': 'application/json'
    }
  });