Redux React运行npm run dev时如何获取终端错误诊断信息

问题复现条件 #

• 执行npm run dev启动项目时终端无错误输出，访问页面直接白屏
• 白屏由CakeView.jsx中如下代码触发：

const numOfCakes = useSelector((state) => state.cake.numOfCakes)

• 将上述代码替换为硬编码const numOfCakes = 3后页面可正常渲染
• 已逐行比对教程示例，确认CakeView.jsx、cakeSlice.js两个文件的代码和教程内容无书写差异

涉及代码片段 #

CakeView.jsx #

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

export const CakeView = () => {
    const numOfCakes = useSelector((state) => state.cake.numOfCakes)
    return (
      <div>
          <h2>Number of cakes - { numOfCakes } </h2>
          <button>Order cake</button>
          <button>Restock cakes</button>
      </div>
    )
}

cakeSlice.js #

import { createSlice } from '@reduxjs/toolkit'
import axios from 'axios'

const initialState = {
    numOfCakes: 10
}

const cakeSlice = createSlice({
    name: 'cake',
    initialState,
    reducers: {
        ordered: (state) => {
            state.numOfCakes--
        },
        restocked: (state, action) => {
            state.numOfCakes += action.payload
        },
    },
})

export default cakeSlice.reducer
export const { ordered, restocked } = cakeSlice.actions

根因判断与终端错误获取方案 #

你贴出的两个文件不存在语法或逻辑错误，白屏的核心原因大概率是Redux store配置文件中，没有将cakeSlice的reducer正确挂载到cake命名空间下：最常见的错误写法是调用configureStore时直接写reducer: { cakeReducer }，此时状态树的键名是cakeReducer而非cake，state.cake值为undefined，读取undefined.numOfCakes会直接触发JS运行时错误；部分构建工具旧版本默认不会把客户端侧的运行时错误打印到启动终端，只会抛在浏览器控制台，就会出现终端无报错、页面白屏的现象。

可通过如下配置让错误直接输出到终端：

• Vite项目：在vite.config.js中添加配置server: { hmr: { overlay: true } }，开启后所有客户端运行时错误会同步打印到执行npm run dev的终端面板，同时浏览器页面会显示错误遮罩层标注具体错误位置
• Store配置：调用configureStore时不要清空默认中间件，保留getDefaultMiddleware()返回的内置检查逻辑，未挂载的reducer路径、非法状态结构会直接抛出带明确提示的错误
• 临时验证：把useSelector的取值逻辑临时改为const numOfCakes = useSelector((state) => state?.cake?.numOfCakes)，如果页面正常渲染且蛋糕数量显示为空，即可100%确认是store挂载reducer的配置问题，和已贴出的两个文件无关。

VS Code 诊断类扩展推荐 #

• Redux DevTools：官方配套开发工具，可直接查看完整store状态树、reducer挂载路径，useSelector读取不存在的状态路径时会直接给出提示
• ESLint + eslint-plugin-react-redux：静态扫描阶段即可识别useSelector中不存在的状态路径，编码阶段直接标红提示，无需等到运行时才发现问题
• Error Lens：将静态扫描、运行时捕获的错误直接高亮显示在对应代码行末尾，无需切换到控制台或问题面板翻找错误信息

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