Как разделить избыточные вызовы API - PullRequest
Новая
       5

Как разделить избыточные вызовы API

0 голосов
/ 23 апреля 2020

У меня есть "fetchComments" и "fetchCommentsById". В настоящее время, когда я пишу console.log props.comments, я регистрирую все комментарии и комментарии 62, есть ли способ разделить их? 

const MainPage = (props) => {
  useEffect(() => {
    props.fetchComments();
    props.fetchCommentById(62);
  }, []);

  console.log("all comments: ", props.comments);

  return (
    <>
      <div>MainPage</div>
    </>
  );
};

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

export default connect(mapStateToProps, { fetchComments, fetchCommentById })(
  MainPage
);

Вот мой редуктор комментариев. 

export default (state = [], action) => {
  switch (action.type) {
    case FETCH_COMMENTS:
      return [...state, action.payload];
    case FETCH_COMMENT_BY_ID:
      return action.payload;
    default:
      return state;
  }
};

1 Ответ

0 голосов
/ 23 апреля 2020

В вашем редукторе вместо хранения только комментариев в массиве сохраните объект, который содержит как полные комментарии, так и commentById.

Компонент главной страницы: 

const MainPage = (props) => {
  useEffect(() => {
    props.fetchComments();
    props.fetchCommentById(62);
  }, []);

  console.log("all comments: ", props.comments);
  console.log("comment by id: ", props.commentById);

  return (
    <>
      <div>MainPage</div>
    </>
  );
};

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

export default connect(mapStateToProps, { fetchComments, fetchCommentById })(
  MainPage
);

Измените свой редуктор следующим образом: 

const initialState = {
  comments: [],
  commentById: ''
}
export default (state = initialState, action) => {
  switch (action.type) {
    case FETCH_COMMENTS:
      return {...state, comments: action.payload}; // assuming you are returning an array from the server
    case FETCH_COMMENT_BY_ID:
      return {...state, commentById: action.payload};
    default:
      return state;
  }
};
...