Как вывести данные из магазина приставок?

Question

Я создал действие и редуктор для сохранения сообщений (массива) в хранилище резервов. Я создал для него действия и редуктор, но как я могу отобразить данные, когда они будут сохранены в хранилище резервов?

reducer.js:

import { SAVE_ITEMS, SAVE_MESSAGES} from '../actions/types';

const initialState = {
    messages: [],
    items: []
}

export default function (state = initialState, action) {
    switch (action.type) {
        case SAVE_MESSAGES:
            return {
                ...state,
                messages: action.payload
            };
        default:
            return state;
    }
}

action.js:

import { SAVE_MESSAGES } from './types';

export const saveMessages = (messages) => ({
    type: SAVE_MESSAGES,
    payload: { messages }
})

В компоненте я сохраняю данные следующим образом:

this.props.saveMessages(data)

, а также соединение:

const mapStateToProps = state => ({
    author: state.chat.author,
    messages: state.chat.messages,
    message: state.chat.message
})

export default connect (mapStateToProps, { saveAuthor, saveMessages, deleteAuthor, deleteMessage })(Chat); 

В объединенном редукторе, т.е. index.js:

import {combineReducers} from 'redux';
import users from './loginReducer'
import allusers from './userReducer'
import chatReducer from './chatReducer'

export default combineReducers({
    users: users,
    allusers: allusers,
    chat: chatReducer
})

Теперь, если я это сделаю console.log(this.props) см. Скриншот ниже:

Теперь, если я сделаю console.log(this.props.messages) см. Скриншот ниже:

Теперь я хочу отобразить данные сообщений и отобразить их, но я получаю ошибку, если я делаю this.props.messages.messages[0] -> error this.props.messages[0] дает неопределенное значение.

Снимок экрана: (избыточные инструменты)

Answer 1

Я думаю, что сначала вы можете проверить, не является ли this.props.messages.messages неопределенным, а затем вы можете использовать map() для печати таких сообщений:

{this.props.messages && this.props.messages.messages && this.props.messages.messages.map(function(msg,i) {
    return (
        <p>{msg.message}</p>
    )
})}