how to push an object into array using react

Question

This is my initial state constant object, I'm trying to add a new comment items into comments but this code which is not pushing my object into it where i'm doing wrong thanks in advance.

    export const comments = [];

    export const BlogPostReducer = (state = comments, action) => {
        switch (action.type) {
            case 'ADD_COMMENT':
                return [
                ...state,
                {
                    name: action.comment.name,
                    subject: action.comment.subject,
                    message: action.comment.message
                }
            ];
            default:
                return state;
        }
    };
after i used see console here...still im getting empty state 

image here

Answer 1

For pushing new object you need to do as

return [
    ...state,
    {
       name: action.comment.name,
       subject: action.comment.subject,
       message: action.comment.message
    }
];

This will create and new array, push the object in it and return it

Answer 2

If you want to add it to an array in the immutable way, you should use 'concat'

try below code.

export const comments = [];

export const BlogPostReducer = (state = comments, action) => {
    switch (action.type) {
        case 'ADD_COMMENT':
            return state.concat({name: action.comment.name,subject: action.comment.subject,message: action.comment.message});
        default:
            return state;
    }
};

Answer 3

This way i have achieved,

const addCommentToArray = (state, action) => {
    return [...state.comments, {
        name: action.comment.name,
        subject: action.comment.subject,
        message: action.comment.message
    }];
}

export const BlogPostReducer = (state = initialState, action) => {
    switch (action.type) {
        case 'ADD_COMMENT':
            return Object.assign({}, state, { comments: addCommentToArray(state, action) });

        default:
            return state;
    }
};

Answer 4

You need to pass comment to store as argument and append to comments.

export const BlogPostReducer = (state, action) => {
    switch (action.type) {
        case 'ADD_COMMENT':
            let { comments } = state;
            comments = comments || [];
            comments.push(action.comment);
            state.comments = comments;
            return state;
        default:
            return state;
    }
};