Как исправить проблемы с добавлением комментариев и удалением комментариев в приложенииact-redux

Question

Я пишу виджет реакции-редукса. Решил следующую проблему. Когда я нажимаю кнопку добавления комментариев, никаких добавлений не происходит, а когда я нажимаю кнопку удаления комментария, он пишет, что карта не является функцией, хотя я передаю массив комментариев. Можете ли вы объяснить, где я допустил ошибку

actions / index.js

let nextCommentId = 0;

export const ADD_COMMENT = 'ADD_COMMENT';
export const REMOVE_COMMENT = 'REMOVE_COMMENT';


export const addComment = (comment) => {
  return {
    type: ADD_COMMENT,
    id: nextCommentId++,
    payload: comment
    }
  }


export const removeComment = (id) => {
  return {
    type: REMOVE_COMMENT,
    id
  }
}

components / add-comment.js

import React, { Component, useState } from 'react';

import { addComment } from '../actions/index.js'


class AddComment extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      date: new Date(),
      text: '',
      name: ''
    };

  }


  render() {
    let comment = {
      name: this.state.name,
      text: this.state.text,
      date: this.state.date
    }
    return (
      <div>
        <form>
          <label htmlFor="username">Введите ваше имя:</label> <br />
          <input
          type="text"
          id="username"
          value={this.state.name}
          onChange={ev => {
            this.setState({ name: ev.target.value });
          }}
          /> <br /><br />

          <label htmlFor="usercomment">Введите ваш комментарий:</label> <br />
          <textarea
            id="usercomment"
            rows="10"
            cols="40"
            value={this.state.text}
            onChange={ev => {
              this.setState({ text: ev.target.value });
            }}
          ></textarea> <br />
        </form>
          <button
            className="btn"
            onClick={ev => {
              addComment(comment);
            }}
          >
            Добавить комментарий
          </button>
      </div>
    );
  }
}
export default AddComment;

компонентов / comment-list.js

import React from 'react';
import AddComment from './add-comments.js';
import { removeComment }  from '../actions/index';

const CommentList = ({ comments , removeComment }) => {
  return (
        <ul>
          {
            comments.map((comment, index) => {
              debugger;
              return (
                <li key={index}>
                  <b>
                  {comment.name + comment.date}
                  </b> <button
                  className="btn-remove"
                  onClick={ev => {
                    if (comments.length === 0) {
                      return comments
                    } else {
                    removeComment(index)
                    }
                  }}
                  >
                  Удалить комментарий
                  </button><br />
                    {comment.text}
                  </li>
                )

              })
            }
          </ul>
  )
}

export default CommentList;

контейнеров / app.js

import React from 'react';
import { connect } from 'react-redux';


import CommentList from '../components/comment-list';
import AddComment from '../components/add-comments';

import { addComment,removeComment } from '../actions/index';

let App = ({ comments, addComment, removeComment }) => {

  return (
    <div>
      <CommentList comments={comments} removeComment={removeComment} />
      <AddComment addComment={addComment}/>
    </div>
  )
}

const mapStateToProps = (state) => {
  return {
    comments: state.comments
  }
}

const mapDispatchToProps = (dispatch) => {
  debugger;
  return {
    addComment: (comment) => dispatch(addComment(comment)),
    removeComment: (id) => dispatch(removeComment(id))
  }
}



App = connect(
  mapStateToProps,
  mapDispatchToProps
)(App);

export default App;

redurs / index.js

import { ADD_COMMENT, REMOVE_COMMENT } from '../actions/index.js'

const comments = (state = [], action) => {
  switch (action.type) {
    case ADD_COMMENT:
      return [
      ...state,
      action.payload
    ]


    case REMOVE_COMMENT:
      return state.comments.filter((comment, id) => id !== action.id);

    default:
      return state
  }
}

export default comments;

src / index.js

import React, {Component} from 'react';
import { render } from 'react-dom';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './containers/app.js';
import { createStore } from 'redux';
import   comments   from './reducers/index.js';


export const initialState = {
  comments: [
    {name: 'John', text: 'good', date: '24 октября 17-56'}
  ]
};
    ]


const store = createStore( comments, initialState);

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.querySelector('#app')
);

Answer 1

вы пропустили this.props в onClick={addComment} в components/add-comment.js

попробуйте вот так

components / add-comment.js

...
         <button
            className="btn"
            onClick={ev => {
              this.props.addComment(comment);
            }}
          >
            Добавить комментарий
          </button>
...

Answer 2

Вы отобразили отправку для своего действия, но затем не использовали ее, вы повторно импортировали действие. Вместо этого используйте действие из реквизита. Если он не связан с отправкой, он ничего не сделает.