[英]redux-saga api yield call works, but no data returned
我现在正在尝试使用 redux saga 发布并获取。 我使用 creative-tim 的材料包作为默认模板。
你想通过yield调用执行的API其实是和服务端通信(服务端把接收到的值保存在DB中),但是响应是UNDEFINED
。
当我在另一个项目中尝试与 redux-saga 相关的代码时,它运行良好,但仅在带有模板的项目中。 但我不认为这是模板的问题。 当我尝试与另一台服务器通信时发生了同样的问题。 (使用 axios 的 GET 通信也存在错误,但这仅在获取时有效。)
我的模块如下所示,
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;
createRequestSaga 如下所示。 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
};
}
这是 api 代码
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'
}
});
};
我希望响应的 output 在下面,(只是服务器的响应)
{
"fieldCount": 0,
"affectedRows": 1,
"insertId": 38,
"info": "",
"serverStatus": 2,
"warningStatus": 0
}
但实际的 output 是未定义的
代码中的问题在哪里? 谢谢您的帮助。
您需要通过使用return
或删除 fetch 周围的花括号来返回fetch
生成的 promise:
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'
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.