带有 redux-toolkit 的 Redux-saga 返回空对象并安慰响应显示 promise{<pending>}

Question

大家好，我是初学者，正在尝试通过 redux-toolkit 学习 redux-saga。我得到一个空的用户对象，当我安慰 axios 响应时，它显示了所有数据，但不在处理程序中。

这是代码。

UserInfoSlice

import {createSlice} from '@reduxjs/toolkit';

export const userInfoSlice = createSlice({
    name: 'user',
    initialState: {
        user: {},
    },

    reducers: {
        getUser() {},

        setUser(state, action) {
            const userInfo = action.payload;
            console.log(userInfo)
            return {...state, ...userInfo};
        }
    },
})


export const {getUser, setUser} = userInfoSlice.actions;

export const selectUserInfo = state => state.user.user;

export default userInfoSlice.reducer;

商店

import {configureStore, combineReducers, getDefaultMiddleware} from '@reduxjs/toolkit';
import createSagaMiddleware from "redux-saga";
import {watcherSaga} from '../saga/RootSaga';

import userinfoReducer from '../features/UserInfoSlice';

const sagaMiddleware = createSagaMiddleware();

const reducers = combineReducers({
    user: userinfoReducer,
});
const store = configureStore({
    reducer: reducers,
    middleware: [...getDefaultMiddleware({thunk: false}), sagaMiddleware]
});

sagaMiddleware.run(watcherSaga);

export default store;

rootsaga

import { takeLatest } from "redux-saga/effects";
import {handlegetUserInfo} from './handlers/UserInfo';
import {getUser} from '../features/UserInfoSlice';






export function* watcherSaga() {
    yield takeLatest(getUser.type, handlegetUserInfo)
}

userInfoHandler

import { call, put } from "redux-saga/effects";
import { requestGetUserInfo } from '../requests/UserInforequest';
import { setUser } from "../../features/UserInfoSlice";


export function* handlegetUserInfo() {
    try {
        const response = yield call(requestGetUserInfo);
        console.log(response)
        const { data } = response;
        console.log(data);
        yield put(setUser({ ...data }))    
    } catch(e) {
        console.log(e)
    }
}

用户信息查询

import axiosInstance from '../../../axios';


export function* requestGetUserInfo() {
    return axiosInstance.get('api/user/')
}

请让我知道我在这里做错了什么以及如何解决这个问题。？

谢谢

Answer 1

生成器与异步

您将 requestGetUserInfo 定义为带有 function* 的生成函数。这意味着您需要 yield 结果。

export function* requestGetUserInfo() {
  return yield axios.get('api/user/');
}

或者，您可以将其定义为 async 函数和 await 结果。

export async function requestGetUserInfo() {
  return await axios.get('api/user/');
}

切片形状

根据您的 API 响应的形状，可能在您的 setUser 案例缩减器中存在问题。

您的 userInfoSlice 的 initialState 声明这是一个带有属性 user 的对象。您的 setUser reducer 将 action.payload userInfo 的属性设置为 state 的顶级属性。只有你的 API returns 一个带有属性 user 的对象才可以。更有可能的是，它 returns 用户对象，您希望将此 userInfo 设置为您所在州的 user 属性。

setUser(state, action) {
  const userInfo = action.payload;
  console.log("payload", userInfo);
  return { ...state, user: userInfo };
}

Code Sandbox Demo

带有 redux-toolkit 的 Redux-saga 返回空对象并安慰响应显示 promise{<pending>}

Redux-saga with redux-toolkit returning empty object and consoling the response shows promise{<pending>}

reactjs

redux

redux-saga

react-redux

生成器与异步

切片形状