Estoy tratando de almacenar usuarios obtenidos por api de usuarios aleatorios y tratando de enviarlos a mi tienda. Tengo usuarios de la tienda con una matriz vacía, cuando intento que los usuarios usen useSelector obtengo un objeto indefinido. Aquí está mi 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, }, });

Aquí está 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;

Aquí está 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;