The given code using useselector is not fetching data - reactjs

Question

Here in functional component useSelector is not working and not fetching any images.I have also attached my codesandbox link below.
https://codesandbox.io/s/how-to-use-redux-in-your-react-app-with-axios-forked-sgzunt?file=/src/component/users.js
import React, { useEffect } from "react";
import { useSelector } from "react-redux";
import { getUsers } from "../store/actions/usersAction";
function Users(props) {
const users = useSelector((state) => state.users);
useEffect(() => {
getUsers();
}, []);
if (!users.length) return null;
const userData = users.map((user) => {
return (
<React.Fragment key={user.id}>
<h6> {user.first_name} </h6>
<p> {user.last_name} </p>
<p> {user.email}</p>
<p>
<img key={user.avatar} src={user.avatar} alt="avatar" />
</p>
</React.Fragment>
);
});
return <div>{userData}</div>;
}
export default Users;

Answer 1

I got a bit confused with your code. You are using a function that returns a function that takes dispatch as an argument, likely as part of a redux-thunk action creator (i.e. async actions). https://redux.js.org/tutorials/fundamentals/part-6-async-logic
You are updating your state with the users for userReducer object so your selector function should be state.users.users
I just updated with classic Js and it is working. I am trying to achieve your functionality by using nested arrow functions.
This is the working code in Classic Js.

Answer 2

users is empty when your components mount thats why its not rendering anything, the action is called in next line.
const [data,setData] = useState([])
useEffect(()=>{ setData(users) },[users])
replace below code
if (!data.length) return null;
replace map function too.
const userData = data.map((user) => {
return (
<React.Fragment key={user.id}>
<h6> {user.first_name} </h6>
<p> {user.last_name} </p>
<p> {user.email}</p>
<p>
<img key={user.avatar} src={user.avatar} alt="avatar" />
</p>
</React.Fragment>
);
});