useSelector Returning Undefined object

Question

I am trying to store users fetched by random users api and trying to dispatch it to my store i have store users with an empty array, when i am trying to get users using useSelector i am getting an undefined object. Here is my store.js:

import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "../features/counter/counterSlice";
import userReducer from "../features/users/userSlice";

export const store = configureStore({
    reducer: {
        counter: counterReducer,
        user: userReducer,
    },
});

Here is userSlice.js

import { createSlice } from "@reduxjs/toolkit";

export const userSlice = createSlice({
    name: "users",
    initialState: {
        userArray: [],
    },
    reducers: {
        getUsers: (state, action) => {
            state.userArray = action.payload;
        }
    }
})

export const { getUsers } = userSlice.actions;
export const selectUsers = (state) => state.users.userArray;
export default userSlice.reducer;

Here is App.js

import logo from './logo.svg';
import './App.css';
import {useSelector, useDispatch } from 'react-redux';
import { getUsers, selectUsers } from './features/users/userSlice';

function App() {
  const dispatch = useDispatch();
  const users = useSelector(selectUsers);

  const fetchUsers = async () => {
    fetch("https://gorest.co.in/public/v2/users")
      .then((response) => response.json())
      .then((data) => {
          console.log("data=====", data);
          dispatch(getUsers(data));
      });
  };

  return (
    <div className="App">
      <header className="App-header">
        <button onClick={fetchUsers}>Get Users</button>
        {users.length > 0 &&
          users.map((user) => {
            <li>user.name</li>;
          })}
      </header>
    </div>
  );
}

export default App;

Answer 1

you are mixing up state.user and state.users

either rename user in configureStore to users or use state.user.userArray