Not able to Map over Fetch data

I am not able to map over the data which is stored in the redux array. This action creator fetches the data and calls the dispatch action.

import { checkStatus, getTours, checkLoading } from "../../features/tourSlice";

export const getData = () => {
  return async (dispatch) => {
    try {
      dispatch(checkLoading(true));
      const res = await fetch(`http://localhost:8080/backpack/api/r1/tours`);

      if (!res.ok) {
        throw new Error(`Error while connecting with server`);
      }

      const data = await res.json();
      dispatch(checkLoading(false));
      dispatch(getTours(data));
    } catch (error) {
      dispatch(
        checkStatus({
          title: `Error`,
          message: `Servers are down or Error while connecting please try again later`,
        })
      );
    }
  };
};

calling in app.js

function App() {
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(getData());
  }, [dispatch]);

while using this component gives nothing.

 const data = useSelector((state) => state.Tour.tours);

but doing console.log of data gives the array but gives nothing when maping over

small example of mapping=>

<main className="main">
        <div className="card-container">
          {data.map((item) => (
            <div className="card" key={item._id}>
              {console.log(item)}
              <div className="card__header">
                <div className="card__picture">
                  <div className="card__picture-overlay">&nbsp;</div>
                  <img
                    src=`${item.image}`
                    alt="Tour 1"
                    className="card__picture-img"
                  />

Via Active questions tagged javascript - Stack Overflow https://ift.tt/jRP1owJ