React组件未接收newProps，评论列表无法实时更新问题排查

Hey there! Let's break down why your comment list isn't updating after posting a new comment—there are a couple of key issues in your code that are causing this:

1. Your POST_COMMENT reducer isn't updating the comments state #

Right now, when a POST_COMMENT action is dispatched, your reducer just returns a copy of the current state without adding the new comment. That means the comments array never changes, so your component has no reason to re-render with the new entry.

Fix: Update the reducer to append the new comment from the action payload to the existing comments array. Remember to always return a new state object/array instead of mutating the old one (this is critical for Redux to detect state changes):

import { GET_COMMENTS, POST_COMMENT } from '../actions'

const initialState = { comments: [] }

export default (state = initialState, action) => {
  switch(action.type) {
    case GET_COMMENTS:
      // Store the actual comment data from the API response, not the full axios object
      return { ...state, comments: action.payload.data }
    case POST_COMMENT:
      // Create a new array with existing comments + the new one (avoids mutation)
      return { 
        ...state, 
        comments: [...state.comments, action.payload.data] 
      }
    default:
      return state
  }
}

2. Your actions aren't handling asynchronous requests properly #

Axios get and post calls return Promises, but right now your action creators are returning the Promise directly as the payload. Without middleware like redux-thunk, Redux can't process asynchronous actions correctly—your reducer will receive a Promise instead of the actual API response data.

Fix: First, ensure you have redux-thunk set up in your Redux store (if you haven't already). Then modify your action creators to handle the async flow properly:

import axios from 'axios'

export const GET_COMMENTS = 'get_comments'
export const getComments = () => async (dispatch) => {
  const response = await axios.get('http://localhost:5000/comments')
  dispatch({
    type: GET_COMMENTS,
    payload: response
  })
}

export const POST_COMMENT = 'post_comment'
export const postComment = (values) => async (dispatch) => {
  const response = await axios.post('http://localhost:5000/comments', values)
  dispatch({
    type: POST_COMMENT,
    payload: response
  })
}

Note: We're using async/await here for readability, but you could also use .then() chaining if you prefer.

3. Double-check your Form component dispatches postComment correctly #

Make sure your Form component is actually dispatching the postComment action when the form is submitted. For example, if it's a connected component:

// Inside your Form component's submit handler
const handleSubmit = (values) => {
  props.postComment(values)
}

Quick recap of why this works: #

• When you submit a comment, postComment sends the request to your API, waits for the response, then dispatches a POST_COMMENT action with the new comment data.
• The reducer takes this new comment and creates a new comments array (using the spread operator [...state.comments, action.payload.data]) instead of mutating the old one—this tells Redux that the state has changed.
• Your Ritmo component is connected to the Redux store, so when the comments state updates, it receives the new props and re-renders the comment list with the new entry.

内容的提问来源于stack exchange，提问作者Nigel F.