反应Redux动作和Reducer映射错误

Question

Im still pretty new to using Redux and Im having an issue trying to tie my action and reducer together properly to another component. So Im just trying something simple like adding a comment to a post. The user types in their name then their comment and I would like it to show both. Im trying to find the best way to write this inside my reducer.

Here is my action

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

Here is my comments.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);

Here is my reducer.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;
}

The way I have it right now, Im getting a "Cannot read property map of undefined. Ive tried adding author:'' to my initialState and author: action.author down in the function in my reducer and still the same thing. So I know that my issue has to do with how Im writing my reducer.

Answer 1

The below solution will help you get the comments from reducer and render it in component if you have comments available otherwise no comments will be displayed

This solution resolves below issue with all the corrections made in Comments.js, actions and reducer

Cannot read property map of undefined

Try to add comment id as a key to li element instead of index. Index always should be second choice when you don't have unique id from data

Update:

You have a typo error in reducer you need to call action.comment but you are calling action.comments. Check the corrected below

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;
  }
}

corrected comments.js code

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);