如何分离 redux api 调用

Question

我有一个“fetchComments”和“fetchCommentsById”。目前，当我 console.log props.cmets 时，我会记录所有 cmets 并评论 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
);

这是我的 cmets 减速器。

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

Answer 1

在您的 reducer 中，不要只将 cmets 存储在数组中，而是存储一个同时包含完整 cmets 和 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;
  }
};