Redux搭配Sagas问题：获取LOAD_GROUP动作状态时返回proto: Object

Hey there! Let's break down why you're seeing that proto: Object when trying to access the state for your LOAD_GROUP action, and how to fix it quickly.

The Root Cause #

Axios' get request returns a full response object that includes way more than just your API data—it wraps the actual data alongside metadata like status codes, headers, and request config. When you pass this entire response object to your loadGroup action, Redux stores the whole thing, and the proto: Object you're seeing is part of this axios response's prototype chain, not your actual group data.

Step-by-Step Fix #

1. Pass Only the API Data to Your Action
   Update your sagas.js to extract the data property from the axios response—this is where your actual group data lives:

   //SAGAS 
   import axios from 'axios'; // Ensure axios is imported
   import { loadGroup } from "../actions/Group"
   
   export function* loadApiDataGroup() {
     try {
       const response = yield call(axios.get, 'http://localhost:8000/api/group');
       // Use response.data instead of the full response object
       yield put(loadGroup(response.data))
     } catch (e) {
       console.log('REQUEST FAILED! Could not get group.')
       console.log(e)
     }
   }
   
   export default function* mySaga() {
     yield [ loadApiDataGroup(), ]
   }
   

2. Ensure Your Action Creator Handles the Data
   Make sure your loadGroup action creator correctly accepts and packages the data as a payload. Here's how your actions.js should look:

   // ACTIONS 
   export const LOAD_GROUP = 'LOAD_GROUP';
   
   export const loadGroup = (groupData) => ({
     type: LOAD_GROUP,
     payload: groupData
   });
   

3. Update Your Reducer to Store the Payload
   Your reducer needs to take the payload from the action and update the state with it. Example reducer code:

   import { LOAD_GROUP } from '../actions/Group';
   
   const initialState = {
     groups: [], // Initialize with an empty array or appropriate default
     // Add other state properties here if needed
   };
   
   export default function groupReducer(state = initialState, action) {
     switch (action.type) {
       case LOAD_GROUP:
         return {
           ...state,
           groups: action.payload // Store the actual group data here
         };
       // Handle other actions here
       default:
         return state;
     }
   }
   

Quick Debug Tip #

If you're unsure about the structure of your axios response, add a console.log(response) right after the API call—this will let you inspect exactly what's being returned, so you can confirm the path to your data (sometimes APIs nest data under another data key, like response.data.data).

内容的提问来源于stack exchange，提问作者Novice-Dev