how to display data with REST? - reactjs

Question

Help, I can not display data from the server. In the console I see that they come, but as soon as I try to access the array or call it via map, the result is undefined. Maybe where is the problem with the implementation? Newbie in redux, if possible I ask you to answer in more detail.
App.js
import React from 'react';
import {Component} from "react";
import './App.css';
import {connect} from 'react-redux';
import {fetchUsersListRequest} from "./action/users";
class App extends Component {
componentDidMount() {
const {usersData} = this.props;
usersData("https://reqres.in/api/users?page=2");
}
render() {
const {users} = this.props;
return (
<div className="apiList">
<ul>
{users.map(userItem =>
<li>{userItem}</li>
)}
</ul>
</div>
);
}
}
function mapStateToProps(state) {
return {
states: state.cars,
users: state.users
}
}
function mapDispatchToProps(dispatch) {
return {
addCar: (newCar) => {
dispatch({type: 'NEW_CAR', payload: newCar})
},
usersData: (url) => {
dispatch(fetchUsersListRequest(url))
}
}
}
export default connect(mapStateToProps, mapDispatchToProps)(App);
store.js
import {combineReducers, createStore, applyMiddleware} from 'redux';
import thunk from "redux-thunk";
import reducers from './reducers/reducers';
import usersList from './reducers/usersList';
const allReducers = combineReducers({
cars : reducers,
users: usersList
})
let store = createStore(allReducers,
applyMiddleware(thunk));
export default store;
reducer.js
const initialState = [];
export default function usersList(state = initialState, action) {
switch(action.type) {
case "USERS_LIST_DATA":
return action.users
default:
return state;
}
action.js
export function fetchUsersList(users) {
return {
type: "USERS_LIST_DATA",
users
}
}
export function fetchUsersListRequest(url) {
return(dispatch)=> {
fetch(url)
.then(response => {
if (!response.ok) {
throw new Error(response.statusText);
}
return response;
}
)
.then(response => response.json())
.then(response => dispatch(fetchUsersList(response)))
}
}

Answer 1

That's because your users are not directly contained in response. So, you need to dispatch your users like this:
export function fetchUsersListRequest(url) {
return(dispatch)=> {
fetch(url)
.then(response => {
if (!response.ok) {
throw new Error(response.statusText);
}
return response;
}
)
.then(response => response.json())
.then(response => dispatch(fetchUsersList(response.data)))
}
}