Redux中useSelector获取posts返回undefined问题求助

1. 先确认是否触发了数据请求Action #

你的Posts组件仅通过useSelector获取状态，但未调用getPosts触发数据请求。需在组件内添加useDispatch和useEffect来触发action：

import { useSelector, useDispatch } from "react-redux";
import { useEffect } from "react";
import { getPosts } from "../actions/posts"; // 确保路径正确
import Post from "./Post/Post";
import useStyles from "./styles";

const Posts = () => {
  const dispatch = useDispatch();
  const posts = useSelector((state) => state.posts);
  
  // 组件挂载时触发获取帖子的请求
  useEffect(() => {
    dispatch(getPosts());
  }, [dispatch]);

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

export default Posts;

2. 检查Redux Store的reducer注册 #

如果使用combineReducers创建store，需确认posts reducer的键名与useSelector中的state.posts完全一致：

import { combineReducers, createStore, applyMiddleware } from "redux";
import thunk from "redux-thunk";
import postsReducer from "./reducers/posts";

const rootReducer = combineReducers({
  posts: postsReducer, // 此处键名必须和state.posts对应
});

const store = createStore(rootReducer, applyMiddleware(thunk));

export default store;

若键名不匹配（比如写成post），state.posts就会返回undefined。

3. 验证API返回数据结构 #

检查api.fetchPosts()的返回值，确认它包含data字段，且无数据时data是空数组。可在action中添加日志验证：

export const getPosts = () => async (dispatch) => {
  try {
    const response = await api.fetchPosts();
    console.log("API返回结果:", response);
    const { data } = response;
    console.log("返回的posts数据:", data);
    dispatch({ type: "FETCH_ALL", payload: data });
  } catch (error) {
    console.log(error.message);
  }
};

如果API返回的data本身是undefined，dispatch后reducer会将状态设为undefined。

4. 确认Reducer初始值有效性 #

你的reducer已设置初始值posts = []，这部分没问题，但要确保该reducer已正确引入到store中，未被其他配置覆盖。

内容的提问来源于stack exchange，提问作者Süleyman Eminbəyli