React Redux中useSelector解构feeder报错：state.feeder未定义

错误信息 #

Journal.jsx:20 Uncaught TypeError: Cannot destructure property 'feeder' of '(0 , react_redux__WEBPACK_IMPORTED_MODULE_1__.useSelector)(...)' as it is undefined

问题背景 #

通过在useSelector中添加state.feeder || {}可以临时规避错误，但这只是权宜之计。实际Redux状态中已经存在API获取的条目，需要找到正确定义feeder状态的方法。

相关代码 #

Journal.js #

const {user} = useSelector((state) => state.auth)

const { feeder, isLoading, isError, message } = useSelector(
  (state) => state.feeder
)

feederSlice.js #

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

export const createFeeder = createAsyncThunk('feeder/create', async (feederData, thunkAPI) => {
  try{
    const token = thunkAPI.getState().auth.user.token
    return await feederService.createFeeder(feederData, token)
    
} catch(error){
    const message = (error.response && error.response.data && error.response.data.message) || error.message || error.toString()
    return thunkAPI.rejectWithValue(message)
}
})

export const getFeeder = createAsyncThunk('feeder/getAll', async (_, thunkAPI) => {
  try{
    const token = thunkAPI.getState().auth.user.token
    return await feederService.getFeeder(token)
  } catch(error){
    const message = (error.response && error.response.data && error.response.data.message) || error.message || error.toString()
    return thunkAPI.rejectWithValue(message)
  }
})

export const feederSlice = createSlice({
  name: 'feeder',
  initialState,
  reducers: {
    reset: (state) => initialState,
  },
  extraReducers:(builder) => {
    builder
    .addCase(createFeeder.pending, (state) => {
      state.isLoading = true
    })
    .addCase(createFeeder.fulfilled, (state, action) => {
      state.isLoading = false
      state.isSuccess = true
      state.feeder.push(action.payload)
      console.log(state.feeder)
    })
    .addCase(createFeeder.rejected, (state, action) => {
      state.isLoading = false
      state.isError = true
      state.message = action.payload
    })
    .addCase(getFeeder.pending, (state) => {
      state.isLoading = true
      console.log('getfeeder loading',state.feeder)
    })
    .addCase(getFeeder.fulfilled, (state, action) => {
      state.isLoading = false
      state.isSuccess = true
      state.feeder = action.payload
      console.log('getfeeder success',state.feeder)
      })
      .addCase(getFeeder.rejected, (state, action) => {
        state.isLoading = false
        state.isError = true
        state.message = action.payload
        console.log('getfeeder rejected',state.message)
      })
}
})

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

feederService.js #

const API_URL ='/api/feeder'

const createFeeder =async(feederData, token) => {
  const config = {
    headers: {
      Authorization: `Bearer ${token}`
    }
  }

const response = await axios.post(API_URL, feederData, config)

return response.data
}

const getFeeder = async (token) => {
  const config = {
    headers: {
      Authorization: `Bearer ${token}`,
    },
  }

const response = await axios.get(API_URL, config)

return response.data
}

const feederService = {
  createFeeder,
  getFeeder
}

export default feederService

解决方案 #

1. 确认Redux Store已注册feederReducer #

这是核心问题：如果feederReducer没有被添加到Store的reducer配置中，state.feeder会直接返回undefined。

检查Store配置文件（通常是store.js），确保包含feeder reducer：

import { configureStore } from '@reduxjs/toolkit';
import authReducer from './path/to/authSlice';
import feederReducer from './path/to/feederSlice';

export const store = configureStore({
  reducer: {
    auth: authReducer,
    feeder: feederReducer // 必须添加这一行
  },
});

2. 确保组件挂载时触发数据获取 #

在Journal组件中，使用useEffect在组件挂载且用户token存在时，调用getFeeder异步操作：

import { useDispatch, useSelector } from 'react-redux';
import { getFeeder } from './path/to/feederSlice';
import { useEffect } from 'react';

function Journal() {
  const { user } = useSelector((state) => state.auth);
  const dispatch = useDispatch();
  // 临时保留|| {}避免首次渲染报错，待Store配置正确后可移除
  const { feeder, isLoading, isError, message } = useSelector(
    (state) => state.feeder || {}
  );

  useEffect(() => {
    // 仅当用户token存在时触发请求
    if (user?.token) {
      dispatch(getFeeder());
    }
  }, [user, dispatch]);

  // 后续渲染逻辑...
}

3. 补全initialState定义 #

确保feederSlice中的initialState完整定义（用户提供的代码中可能遗漏了const initialState = {，需补全），保证状态初始值正确。

总结 #

错误根源是Redux Store未正确注册feederReducer，导致state.feeder不存在。完成Store配置后，配合组件内触发异步请求，即可正常获取并渲染feeder数据，无需依赖|| {}的临时规避方案。

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