我有一个Next.js应用程序,我在其中使用了 redux / redux saga。
虽然我从后端接收数据(因此我可以在浏览器的网络选项卡中看到一个有效负载),但它作为undefined
. 我认为这可能是由于有效负载类型并将其设置为any
. 尽管如此,它还是不想工作。
这是我的设置(以简化形式显示):
动作.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,
});
动作类型.ts
export const actionTypes = {
GET_SOME_STUFF: 'GET_SOME_STUFF',
GET_SOME_STUFF_SUCCESS: 'GET_SOME_STUFF_SUCCESS',
};
减速器.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);
}
api调用
getSomeStuff = (data: any) => {
http.get(`my/custom/endpoint`) as Promise<any>;
};
派遣
dispatch(getSomeStuff('someStringParametersPassed'));
我得到的简化有效负载(在浏览器网络选项卡中)
{
"items": [
{
"id":"123456789",
"stuff":{
"generalStuff": {
...
},
"basicStuff": {
...
}
}
},
]
}
我猜你只是忘记了return
在 api 调用中:
getSomeStuff = (data: any) => {
return http.get(`my/custom/endpoint`) as Promise<any>;
};
:)
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句