Как правильно использовать useSelector и useDispatch с redux-thunk?

Question

Кто-нибудь может мне объяснить, как я ошибаюсь? Как правильно использовать useSelector и useDispatch с помощью функции useEffect при редукс-thunk asyn c.

Мой вывод кода возвращает на экране только заголовок «Список пользователей», а не список ожидаемых пользователей.

Код:

import React, { useEffect } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { fetchUsers } from '../redux'

function UserContainer() {
    const userData = useSelector(state => state.user)
    const dispatch = useDispatch()

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

    return userData.loading ? ( <h2>Loading...</h2> ) :
        userData.error ? (<h2>{userData.error}</h2>) :
        <div>
            <h2>User List</h2>
            <div>
                { userData && userData.users && userData.users.map(user => <p>{user.name}</p>) }
            </div>
        </div>

 }

 export default UserContainer

Здесь функция действия:

export const fetchUsers = () =>{
    return function(dispatch) {
        dispatch(fetchUsersRequest())
        axios.get('https://jsonplaceholder.typicode.com/users')
        .then(response => {
            const users = response.data
            dispatch(fetchUsersSuccess(users))
        })
        .catch(error => {
            dispatch(fetchUsersFailure(error.message))
        })

    }
}

Answer 1

Я НАШЕЛ ОШИБКУ! Это был недосмотр. В функции действия I .map () ответ, где он не нужен:

const users = response.data .map (user => user.id)

Ну, этот код - прекрасный пример того, как правильно использовать useSelector и useDispatch с вызовом ajax с redux-thunk .