how to display data with REST?

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)))
}

}