Компонент не получает newProps

Question

В настоящее время я создаю веб-приложение в стиле комментариев / доски объявлений и испытываю проблемы с отображением комментариев так, как мне бы хотелось. Я хочу, чтобы список комментариев обновлялся сразу после завершения публикации, но мой компонент не получает newProps. Я что-то мутирую в своем состоянии и просто не вижу его? Спасибо!

Мой контейнерный компонент:

class Ritmo extends Component {
  componentDidMount = () => {
    this.props.getComments()
  }
  renderComments = () => {
    return this.props.comments.comments.map(e => {
      return (
        <Comment
          key={e.id}
          username={e.username}
          comment={e.comment}
        />
      )
    })
  }
  render() {
    return (
      <div className={container}>
        <div className={projectContainer}>
          <Text>This is my project, RITMO</Text>
          <Image imageSource="../../assets/instructor-screen.png" />
        </div>
        <div className={formContainer}>
          <Form />
          {this.renderComments()}
        </div>
      </div>
    )
  }
}

const mapStateToProps = ({ comments }) => {
  return { comments }
}

export default connect(mapStateToProps, { getComments })(Ritmo)

Мои действия:

export const GET_COMMENTS = 'get_comments'
export const getComments = () => {
  const request = axios.get('http://localhost:5000/comments')

  return {
    type: GET_COMMENTS,
    payload: request
  }
}

export const POST_COMMENT = 'post_comment'
export const postComment = (values) => {
  const request = axios.post('http://localhost:5000/comments', values)

  return {
    type: POST_COMMENT,
    payload: request
  }
}

Мои редукторы:

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

const initialState = {
  comments: []
}

export default (state = initialState, action) => {
  switch(action.type) {
    case GET_COMMENTS:
    return {
      ...state,
      comments: action.payload
    }
    case POST_COMMENT:
    return {
      ...state
    }
    default:
    return state
  }
}

Answer 1

1.
Ваши действия getComments а также postComment должен быть thunks, потому что они асинхронные.

Вот видео, которое помогает объяснить роль, которую играют громогласные:
https://egghead.io/lessons/javascript-redux-dispatching-actions-asynchronously-with-thunks

(Вам нужно будет подключить Thunks, используя Redux applyMiddleware когда ты createStore.)

Эти блоки не будут напрямую интерпретироваться вашим редуктором, а...

2.
Вам нужно будет создавать регулярные действия для обработки того, что вы хотите сделать после того, как вы getComments и / или postComment,

Вы хотите, чтобы комментарии, которые вы получаете, были сохранены в состоянии, поэтому вы сделаете SET_COMMENTS действие, и ваш редуктор справится с этим так, как у вас есть GET_COMMENTS подключен

Ваш postComment Для thunk не требуется регулярное действие (с вашим текущим кодом), потому что вы не изменяете состояние Redux в ответ на что-либо после публикации.

Эти шаги вместе выглядят так:

// Actions
const SET_COMMENTS = "set_comments";
const setComments = comments => ({
  type: SET_COMMENTS,
  payload: comments
});

// Thunks
const getCommentsAsync = () => dispatch => {
  return axios
    .get("http://localhost:5000/comments")
    .then(comments => dispatch(setComments(comments)));
};

const postCommentAsync = comment => dispatch => {
  return axios.post("http://localhost:5000/comments", comment);
};

// Reducer
const initialState = {
  comments: []
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case SET_COMMENTS:
      const comments = action.payload;
      return {
        ...state,
        comments
      };
    default:
      return state;
  }
};