Компонент не получает newProps - PullRequest
Новая
       5

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

0 голосов
/ 23 мая 2018

В настоящее время я создаю веб-приложение в стиле комментариев / доски объявлений и испытываю проблемы с отображением комментариев так, как мне бы хотелось.Я хочу, чтобы список комментариев обновлялся сразу после завершения публикации, но мой компонент не получает 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
  }
}

1 Ответ

0 голосов
/ 24 мая 2018

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

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

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

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

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

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

Ваш блок 1030 * не будет нуждаться в регулярном действии (с вашим текущим кодом)потому что вы не изменяете состояние 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;
  }
};
...