useSelector 属性返回未定义

Question

我正在尝试使用 Redux 获取“所有帖子”。我应该得到一个空数组，但相反，我变得不确定。 这是我的减速器：

export default (posts = [], action) => {
  switch ((action.type)) {
    case "FETCH_ALL":
      return action.payload;
    case "CREATE":
      return posts;

    default:
      return posts;
  }
}; 

行动

export const getPosts = () => async (dispatch) => {
  try {
    const { data } = await api.fetchPosts();
    dispatch({ type: "FETCH_ALL", payload: data });
  } catch (error) {
    console.log(error.message)
  }
};

Posts.js 组件

import { useSelector } from "react-redux";
import Post from "./Post/Post";
import useStyles from "./styles";

const Posts = () => {
  const posts = useSelector((state)=>state.posts)
  console.log(posts)
  const classes = useStyles();
  return (
    <>
      <h1>Posts</h1>
      <Post />
    </>
  );
};

export default Posts;

Answer 1

根据您的减速器，您的整个 state 是一个 posts 数组，而不是像 { posts: [ ] } 这样的 state object。 因此，在您的选择器中，您可以简单地返回 state，因为它在 Posts 组件中。

 const posts = useSelector((state)=>state);

Answer 2

我相信您需要更改 reducer 文件中的一行。 您需要将 action.payload 分配给帖子，然后您才能访问它

export default (posts = [], action) => {
  switch ((action.type)) {
    case "FETCH_ALL":
      return {posts: action.payload};
    case "CREATE":
      return posts;

    default:
      return posts;
  }
}; 

Answer 3

1. 首先， switch ((action.type))应该是switch (action.type)
2. 然后，您应该检查api的data是否正确返回
3. 最后，检查您的 redux state object 和您的posts选择器