Redux中useSelector返回undefined问题排查求助

我是Redux新手，正在跟着教程开发一个帖子创建应用。目前遇到的问题是：尽管状态已处于fulfilled状态且payload存在，但使用useSelector钩子时返回undefined。

组件Posts.js代码 #

import React from "react";
import { useSelector } from "react-redux/";

import Post from "./Post/Post";

const Posts = () => {
    const posts  = useSelector((state) => state.posts);

    console.log("POSTS FROM STATE: ", posts);

    return (
        <>
            <h1>POSTS</h1>
            <Post />
            <Post />
        </>
    );
}

export default Posts;

store.js代码 #

import { configureStore } from "@reduxjs/toolkit";
import fetchReducer from "./fetchSlice";

export default configureStore({
    reducer: {
        fetch: fetchReducer,
    },
});

fetchSlice.js代码 #

import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";

export const getPostsAsync = createAsyncThunk(
    'posts/getPostsAsync',
    async () => {
        try {
            const resp = await fetch('http://localhost:5000/posts');
            console.log("response: ", resp);
            if (resp.ok) {
                const posts = await resp.json();
                console.log("resp json: ", posts);
                return { posts };
            }
        } catch(error) {
            console.log(error);
        };
    }
);

export const fetchSlice = createSlice({
    name: 'posts',
    initialState: [],
    reducers: {
        fetchAll: (state, action) => {
            return action.payload.posts;
        },
        create: (state, action) => {
            return
        },
    },
    extraReducers: (builder) => {
        console.log("extra builder");
        builder
            .addCase(getPostsAsync.pending, (state) => {
                console.log("Request pending");
            })
            .addCase(getPostsAsync.rejected, (state) => {
                console.log("Request rejected");
            })
            .addCase(getPostsAsync.fulfilled, (state, action) => {
                console.log("Fulfilled, reducer payload: ", action.payload.posts);
                return action.payload.posts;
            })
    }
});

export const { fetchAll, create } = fetchSlice.actions;

export default fetchSlice.reducer;

App.js代码 #

import React, { useEffect } from "react";
import { Container, AppBar, Typography, Grow, Grid, ThemeProvider } from "@mui/material";
import { useDispatch } from "react-redux";

import Posts from "./components/Posts/Posts";
import Form from "./components/Form/Form";
import memories from "./images/memories.png";

import { getPostsAsync } from "./redux/fetchSlice";
import { theme } from "./styles";

const App = () => {
    
    const dispatch = useDispatch();
    useEffect(() => {
        dispatch(getPostsAsync());
    }, [dispatch]);

    return (
        <Container maxwidth="lg">
            <ThemeProvider theme={theme}>
                <AppBar sx={theme.appBar} position="static" color="inherit">
                    <Typography sx={theme.heading} variant="h2" align="center">Memories</Typography>
                    <img sx={theme.image} src={memories} alt="memories" height="60" />
                </AppBar>
                <Grow>
                    <Container>
                        <Grid container justify="space-between" alignItems="stretch" spacing={3}>
                            <Grid item xs={12} sm={7}>
                                <Posts />
                            </Grid>
                            <Grid item xs={12} sm={4}>
                                <Form />
                            </Grid>
                        </Grid>
                    </Container>
                </Grow>
            </ThemeProvider>
        </Container>
    );
}

export default App;

问题原因与解决方法 #

核心问题是你在useSelector中访问的状态路径错误：

1. 在store.js中，你将fetchReducer挂载到了fetch这个键名下：

   export default configureStore({
       reducer: {
           fetch: fetchReducer, // 状态实际挂载在state.fetch下
       },
   });
   

2. 但在Posts.js中，你尝试访问的是state.posts：

   const posts = useSelector((state) => state.posts); // 错误路径
   

   由于Redux store中不存在state.posts这个节点，所以返回undefined。

修复步骤 #

修改Posts.js中的useSelector，将状态路径改为state.fetch：

const posts = useSelector((state) => state.fetch); // 正确路径

额外提示 #

• 切片名称posts仅用于生成action类型前缀，不会影响状态在store中的挂载路径——状态的路径完全由store.js中reducer对象的键名决定。
• 另外注意fetchSlice里的create reducer有一个空return，这会导致后续创建帖子的逻辑无法正常工作，建议后续补充对应的状态更新逻辑。

内容的提问来源于stack exchange，提问作者Ferre_Diego