从服务器获取的数据无法加载至Redux Store问题求助

从MongoDB数据库取数后通过服务器拉取，最终在指定组件渲染UI。使用Redux Toolkit做状态管理，当前遇到的问题是：从服务器获取的数据无法存入Store，初始的空数组拉取后仍然为空。已使用createSlice生成动作创建器和动作类型，createAsyncThunk处理异步拉取数据的任务。

Slice reducer #

import { createSlice, createAsyncThunk} from '@reduxjs/toolkit'
import axios from 'axios'

const initialState = {
    realestate: [],
    isSuccess: false,
    isLoading: false,
    message: '',
}

export const getRealEstates = createAsyncThunk(
    'realestate/getRealEstates', async () => {
        try {
            const response = await axios.get('castles')
            return response.data
        } catch (error) {
            console.log(error)
        }
    }
)


export const estateSlice = createSlice({
    name: 'realestate',    
    initialState,
    reducers: {
        reset: (state) => initialState,
    },
    extrareducers: (builder) => {
        
        builder.addCase(getRealEstates.pending, (state) => {
            state.isLoading = true
        })
        builder.addCase(getRealEstates.fulfilled, (state, action) => {
            state.isLoading = false
            state.isSuccess = true
            state.realestate = action.payload
        })
         builder.addCase(getRealEstates.rejected, (state, action) => {
            state.isLoading = false
            state.isError = true
            state.message = action.payload
        })
    }
})

export const { reset } = estateSlice.actions
export default estateSlice.reducer

Store #

export const store = configureStore({
reducer: {
    realestate: realestateReducer,
    registered: registerReducer,
  },
});

Component #

const realestates = useSelector(state => state.realestate)
const { isLoading, realestate, isError, message, isSuccess} = realestates

const dispatch = useDispatch()

useEffect(() => {
    dispatch(getRealEstates())
        if(realestate){
            setShow(true)
        }else{
            console.log('No data retrieved')
        }
    
}, [dispatch, isError, realestate, message])

排查与修复方案 #

1. 修正Axios请求地址
   当前axios.get('castles')是相对路径，需确认服务器接口的完整路径（比如/api/castles或http://your-server-url/castles），路径错误会直接导致请求失败，无数据返回。

2. 完善createAsyncThunk的错误处理
   原代码的catch块仅打印错误，未返回reject值，导致rejected状态下action.payload为undefined，且请求失败时fulfilled分支不会触发。修改为：

   export const getRealEstates = createAsyncThunk(
       'realestate/getRealEstates', async (_, { rejectWithValue }) => {
           try {
               const response = await axios.get('/api/castles') // 替换为正确接口地址
               return response.data
           } catch (error) {
               console.log(error)
               // 返回错误信息，便于Store捕获
               return rejectWithValue(error.response?.data?.message || '数据拉取失败')
           }
       }
   )
   

3. 补全initialState的缺失字段
   初始状态未定义isError，但rejected分支中给该字段赋值，建议在initialState中补上，保持状态结构一致：

   const initialState = {
       realestate: [],
       isSuccess: false,
       isLoading: false,
       isError: false, // 新增该字段
       message: '',
   }
   

4. 修复Component的useEffect逻辑
   原useEffect依赖realestate会导致重复触发请求，且空数组[]在JS中属于truthy值，if(realestate)判断永远为true。拆分逻辑：

   // 仅组件挂载时触发一次请求
   useEffect(() => {
       dispatch(getRealEstates())
   }, [dispatch])
   
   // 单独监听realestate变化处理显示逻辑
   useEffect(() => {
       if(realestate.length > 0){
           setShow(true)
       }else{
           console.log('No data retrieved')
       }
   }, [realestate])
   

5. 确认Store的Reducer导入正确性
   检查realestateReducer是否正确导入了estateSlice的reducer，比如导入语句应为：

   import realestateReducer from './path/to/estateSlice'
   

内容的提问来源于stack exchange，提问作者Noud