Redux props not showing in React component

I can't understand why my Redux props are showing empty on the React component. This is the screenshot of the Redux state:

This is the component that visualizes. It is a child of a parent component that fetches the data and runs a for loop through the array of elements.

import React, { Component } from 'react'
import { connect } from "react-redux";
import PropTypes from "prop-types";

 class ResourceCard extends Component {
  render() {
    const { resource } = this.props;

    return (
      <div className="resource-card">
        <div className="resource-card-header">
        <span className="res-span-header">{resource.header}</span>
        </div>
        <div className="resource-card-image">
        <img src={resource.image} alt={resource.header} width='300px' />
        </div>
        <div className="resource-card-desc">
        <span className="res-span-desc">{resource.description}</span>
        </div>
        <div className="resource-card-link">
        <span className="res-span">{resource.website}</span>
        </div>
      </div>
    )
  }
}


ResourceCard.propTypes = {
  resource: PropTypes.object.isRequired,
  auth: PropTypes.object.isRequired
};

const mapStateToProps = state => ({
  auth: state.auth,
  resource: state.resource
});

export default connect(
  mapStateToProps,
  {}
)(ResourceCard);

While the css is being rendered properly, and there are no errors in the console, the content itself is not there:

What could possibly be wrong here?

EDITED: Adding actions code:

// Get Resources
export const getResources = () => dispatch => {
  axios
    .get("/api/resources")
    .then(res =>
      dispatch({
        type: GET_RESOURCES,
        payload: res.data
      })
    )
    .catch(err =>
      dispatch({
        type: GET_RESOURCES,
        payload: null
      })
    );
};

And the reducer:

import {
  ADD_RESOURCE,
  GET_RESOURCES,
  DELETE_RESOURCE,
  GET_RESOURCE
} from "../actions/types";

const initialState = {
  resources: [],
  resource: {}
};

export default function(state = initialState, action) {
  switch (action.type) {
    case GET_RESOURCES:
      return {
        ...state,
        resources: action.payload
      };
    case GET_RESOURCE:
      return {
        ...state,
        resource: action.payload
      };
    case DELETE_RESOURCE:
      return {
        ...state,
        resources: state.resources.filter(resource => resource._id !== action.payload)
      };
    case ADD_RESOURCE:
      return {
        ...state,
        resources: [action.payload, ...state.resources]
      };
    default:
      return state;
  }
}

Parent component that runs a for-loop:

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import ResourceCard from './ResourceCard';

class ResourceFeed extends Component {
  render() {
    const { resources } = this.props;
    return resources.map(resource => <ResourceCard key={resource._id} resource={resource} />)
  }
}

ResourceFeed.propTypes = {
  resources: PropTypes.array.isRequired
}

export default ResourceFeed;

And the component above contains this parent:

<ResourceFeed resources={resources}/>