Redux无报错但页面空白，useSelector无法获取初始化username求助

你的代码存在两处关键错误，导致Redux状态无法正常初始化和读取：

1. useSelector 取值路径错误
   在App.js中，你直接尝试读取state.username，但根据store的配置，user切片的状态是挂载在state.user路径下的，所以正确的取值路径应该是state.user.username。

2. userSlice 导出错误
   在userSlice.js中，你导出的是userSlice.reducers（复数形式），但createSlice返回的对象中，正确的reducer属性是单数的reducer，复数的reducers是你定义的 reducer 函数集合，不能直接传给store配置。

修正后的代码 #

App.js

import React from 'react';
import { useSelector } from 'react-redux';

import './App.css';

function App() {
  // 修正取值路径
  const username = useSelector(state => state.user.username)
  return (
    <div className="App">
      {username}
    </div>
  );
}

export default App;

userSlice.js

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

export const userSlice = createSlice({
  name:'user',
  initialState:{
    username:'Tony stark',
    post:'',
  },
  reducers:{
    updatePost:(state,action)=>{
      state.username = action.payload;
    }
  }
})

export const { updatePost} = userSlice.actions;
// 修正为导出单数的 reducer
export default userSlice.reducer;

完成以上两处修正后，Redux状态会正常初始化，页面将正确显示Tony stark。

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