TypeError: Cannot read property 'values' of undefined
Home.render
./components/home/components/Home.jsx:24
  21 |    render() {
  22 |        const { uploads } = this.props;
  23 |        // convert uploads values to an array
> 24 |        const values = [...uploads.values()];
     | ^  25 |
  26 |        return (
  27 |            <div style={CARD_CONTAINER}>

import { UPDATE_REACTION, REQUEST_UPLOAD_LIST } from './actionTypes';
import { USER_UPLOADS } from './constants';

const INITIAL_STATE = {
    uploads: new Map(),
};

function generateUploadsMap() {
    const setOfUserUploads = new Map();

    USER_UPLOADS.forEach(userUpload => {
        const { _id } = userUpload;

        setOfUserUploads.set(_id, userUpload);
    });
}
export default (state = { ...INITIAL_STATE }, action) => {
    switch (action.type) {
        case REQUEST_UPLOAD_LIST: {
            const { payload } = action;

            return {
                ...state,
                uploads: generateUploadsMap(payload),
            };
        }
        default:
            return state;
    }
};

import React from 'react';
import { Avatar, Card, Icon, List } from 'antd';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';

import { LIST_TEXTS, STYLES } from '../constants';
import * as actions from '../actions';
import { getUploads } from '../selectors';

const { AVATAR, CARD_CONTAINER, CARD_LIST, USER_LIST } = STYLES;
const { INNER, MORE, UPLOAD, VERTICAL } = LIST_TEXTS;

class Home extends React.Component {

    componentDidMount() {
        const { requestUploadList } = this.props.actions;

        requestUploadList();
    }

    render() {
        const { uploads } = this.props;

        const values = [...uploads.values()];

        return (
            <div style={CARD_CONTAINER}>
                <List
                  itemLayout={VERTICAL}
                  dataSource={values}
                  renderItem={item => (
                      <List.Item style={USER_LIST}>
                          <Card
                            cover={<img alt={UPLOAD} src={item.image} />}
                            extra={<Icon type={MORE} />}
                            hoverable
                            title={(
                                <a>
                                    <Avatar src={item.image} style={AVATAR} />
                                    {item.user}
                                </a>
)}
                            type={INNER}
                            style={CARD_LIST}
                          >
                              {item.story}
                          </Card>
                      </List.Item>
                  )}
                />
            </div>
        );
    }
}

const mapStateToProps = state => ({
    uploads: getUploads(state),
});

const mapDispatchToProps = dispatch => ({
    actions: bindActionCreators(actions, dispatch),
});

export default connect(mapStateToProps, mapDispatchToProps)(Home);