如何在react-redux中修复“ TypeError：this.props.messages.map不是函数”

我正在尝试通过mapDispatchToProps（）将道具传递到我的组件。但是，我遇到了这个问题

TypeError: this.props.messages.map is not a function
DisplayMessages.render
C:/Users/User/Desktop/Project/first-react-redux/src/DisplayMessages.js:38
  35 |             <h2>Type in a new message</h2>
  36 |             <input value={input} onChange={this.handleChange} />
  37 |             <button onClick={this.submitMessage}>Submit</button>
> 38 |             <ul>{this.props.messages.map((message, index) => <li key={index}>{message}</li>)}</ul>
     | ^  39 |         </div >
  40 |     )
  41 | }

如果取消注释第38行，则可以显示我的页面。但是，单击按钮后，我收到以下错误消息：

TypeError: Object(...) is not a function
submitNewMessage
C:/Users/User/Desktop/Project/first-react-redux/src/DisplayMessagesContainer.js:18
  16 |     return {
  17 |         submitNewMessage: (newMessage) => {
> 18 |             dispatch(addMessage(newMessage))
  19 |         }
  20 |     }
  21 | };

我是React-redux的新手，我不确定出了什么问题。我目前正在研究的示例来自freecodecamp，我已经在代码编辑器中测试了这些代码并通过了挑战（除了这次我是在自己的计算机上进行操作并构造自己的文件树）。

这是我的组件的外观：

import React from 'react';

export default class DisplayMessages extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            input: '',
        }
    }

    handleChange = (event) => {
        this.setState({
            input: event.target.value
        })
    }

    submitMessage = () => {
        this.props.submitNewMessage(this.state.input)
        this.setState({
            input: '',
       })
    }


    render() {
        const { input} = this.state
        return (
            <div>
                <h2>Type in a new message</h2>
                <input value={input} onChange={this.handleChange} />
                <button onClick={this.submitMessage}>Submit</button>
                <ul>{this.props.messages.map((message, index) => <li key={index}>{message}</li>)}</ul>
            </div >
        )
    }
}

这是我的容器：

import DisplayMessages from './DisplayMessages';
import { connect } from 'react-redux';
import addMessage from './redux/actions'

mapStateToProps
const mapStateToProps = (state) => {
    return { messages: state }
};

const mapDispatchToProps = (dispatch) => {
    return {
        submitNewMessage: (message) => {
            dispatch(addMessage(message))
        }
    }
};

const DisplayMessagesContainer = connect(mapStateToProps, mapDispatchToProps)(DisplayMessages)

export default DisplayMessagesContainer

我的reducer.js：

import { combineReducers } from 'redux';
import types from './types';

const defaultState = [];
const messageReducer = (state = defaultState, action) => {
    switch (action.type) {
        case types.ADD:
            return [...state].concat(action.message)
            break;
        default:
            return state
    }
}

const rootReducer = combineReducers({
    message: messageReducer
});

export default rootReducer;

我为动作创建者创建的action.js：

import types from './types.js';

const addMessage = (message) => {
    return {
        type: types.ADD,
        message: message
    }
}

export default {
    addMessage,
}

而我的type.js：

const ADD = "ADD"

export default {
    ADD,
}

那么我的代码到底出了什么问题？

关于此的任何帮助都非常感谢。

谢谢

编辑：我已经确认this.props.messages是一个对象而不是数组。但是我还有一个问题：为什么我可以在freecodecamp的代码编辑器中映射一个对象，但现在还不能呢？以及如何解决此问题？