Реакция действий Redux и ошибка отображения редуктора

Question

Я все еще довольно новичок в использовании Redux, и у меня возникла проблема с попыткой связать мои действия и редуктор правильно с другим компонентом.Поэтому я просто пытаюсь сделать что-то простое, например добавить комментарий к сообщению.Пользователь вводит свое имя, затем свой комментарий, и я хотел бы, чтобы он показывал оба.Я пытаюсь найти лучший способ написать это в моем редукторе.

Вот мое действие

export const ADD_COMMENT = 'ADD_COMMENT';
export const addComment = (author, comment) => ({
 type: ADD_COMMENT,
  author,
  comment
});

Вот мои комментарии. Js

import React from 'react';
import {connect} from 'react-redux';
import CommentForm from './comment-form';

export function Comments(props) {
 const comments = props.comments.map((comment, index) => (
    <li key={index}>
        <div className="author">{comment.author} says:</div>
        <div className="comment">{comment.comment}</div>
    </li>
));
return (
    <section>
        <h2>Comments</h2>
        {comments.length ? <ul>{comments}</ul> : <div>No comments</div>}
        <h3>Add a comment</h3>
        <CommentForm />
    </section>
);
}

export const mapStateToProps = (state, props) => ({
comments: state.comments
});

export default connect(mapStateToProps)(Comments);

Вот мое сокращение.js

import {ADD_COMMENT} from './actions';

const initialState = {
 comments: []
};

export default function(state = initialState, action){
 if(action.type === ADD_COMMENT){
    return Object.assign({}, state, {
        comments: action.comments
    });
}

return state;
}

у меня сейчас это получается, я получаю «Невозможно прочитать карту свойств неопределенной. Я пытался добавить автора:» в мой initialState и автора: action.author вниз в функции в моем редукторе и все то же самое. Так что я знаючто моя проблема связана с тем, как я пишу свой редуктор.

Answer 1

Приведенное ниже решение поможет вам получить комментарии от редуктора и отобразить их в компоненте, если у вас есть комментарии, в противном случае будет отображаться no comments

Это решение решает проблему ниже со всеми исправлениями, внесенными в комментарии.js, actions и reducer

Невозможно прочитать карту свойств неопределенного

Попробуйте добавить идентификатор комментария в качестве ключа к элементу li вместо индекса.Индекс всегда должен быть вторым выбором, если у вас нет уникального идентификатора из данных

Обновление:

У вас есть ошибка опечатки в редукторе, вам нужно вызвать action.commentно вы звоните action.comments.Проверьте исправленный ниже

import {ADD_COMMENT} from './actions';
const initialState = {
 comments: []
};

export default function(state = initialState, action){
  if(action.type === ADD_COMMENT){
    state.comments = action.comment;
    return state;
  }else{
     return state;
  }
}

исправленный код comments.js

import React from 'react';
import {connect} from 'react-redux';
import CommentForm from './comment-form';

export function Comments(props) {
return (
    <section>
        <h2>Comments</h2>
         <ul>
        {Array.isArray(props.comments) && props.comments.length > 0 && props.comments.map((comment, index) => (
      <li key={index}>
         <div className="author">{comment.author} says:              </div>
          <div className="comment">{comment.comment}</div>
        </li>
   ))}
    </ul>

    {!Array.isArray(props.comments) && <div>No comments</div>}
        <h3>Add a comment</h3>
        <CommentForm />
    </section>
);
}

const mapStateToProps = (state, props) => {
 return {"comments": state.comments}
};

export default connect(mapStateToProps)(Comments);