Uncaught TypeError: Cannot destructure property 'users' of '(0 , _redux_hooks_

I have an error : Uncaught TypeError: Cannot destructure property 'users' of '(0 , _redux_hooks__WEBPACK_IMPORTED_MODULE_11__.useAppSelector)(...)' as it is undefined. which happens in app component on line const { users } = useAppSelector(state => state.users); When hovering on { user } , it shows its type User[], which it inferes from slice file correctly. All parentesis also seems to be in place. Here is store File.

import { configureStore } from '@reduxjs/toolkit';
import usersReducer from './features/users';

const store = configureStore({
  reducer: {
    users: usersReducer,
  },
});

export default store;

export type RootState = ReturnType<typeof store.getState>;

export type AppDispatch = typeof store.dispatch;

Here is hooks file where I define types of useDispatch() and useSelector()

import { TypedUseSelectorHook, useSelector, useDispatch } from 'react-redux';
import { AppDispatch, RootState } from './store';

export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
export const useAppDispatch: () => AppDispatch = useDispatch;

Here is users Slice file

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

import { User } from '../../types/User';

const GET_URL = '***********************************';

export const fetchUsers = createAsyncThunk('users/fetchUsers', async () => {
  const response = await axios.get(GET_URL);

  return response.data;
});

type InitialState = {
  users: User[];
  status:'idle' | 'failed' | 'pending' | 'fullfilled';
  error: string | null;
};

const initialState: InitialState = {
  users: [],
  status: 'idle',
  error: 'error',
};

const usersSlice = createSlice({
  name: 'users',
  initialState,
  reducers: {},
  extraReducers(builder) {
    builder
      .addCase(fetchUsers.pending, (state) => {
        state.status = 'pending';
      })
      .addCase(fetchUsers.fulfilled, (state, action) => {
        state.status = 'fullfilled';

        state.users = action.payload;
      })
      .addCase(fetchUsers.rejected, (state) => {
        state.status = 'failed';
        state.error = 'error';
      });
  },
});

export default usersSlice.reducer;

and here is app file

import { useAppDispatch, useAppSelector } from './redux/hooks';
import { fetchUsers } from './redux/features/users';
export const App: React.FC = () => {
  const dispatch = useAppDispatch();
  const { users } = useAppSelector(state => state.users); // here shows an error

  useEffect(() => {
    dispatch(fetchUsers());
  }, [dispatch]);
...

May be somebody encountered similar error before. Will be glad for any suggestion.

CodePudding user response：

You're trying to access state.users.users here by destructuring the result of your useAppSelector

const { users } = useAppSelector(state => state.users);

If you want to access state.users you should change your declaration to match your needs

const users = useAppSelector(state => state.users);