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

Hello having the following error

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

I can by pass the error if i do "|| {}" on the state.feeder line in the first file but the only thing that allows me to do is by pass the fact that its undefined.

i need to find a way to define the feeder state so i can display the items i am getting from my api.

speaking of my api when i bypass the the error by using the || i can see in redux that i am able to get the items in the state. which is confusing me. the following code is:

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

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

feederSlice.js

  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