使用Redux Toolkit开发React应用时组件不显示如何解决

优先按以下顺序排查，90%以上的同类问题都能定位解决：

1. 排查入口文件Provider接入错误 #

这是最高发的问题：

• 确认Provider是从react-redux库正确导入，且根组件<App />完整包裹在<Provider store={store}></Provider>标签内部，不要把Provider写在App组件的子节点里，也不要漏传store属性。
• 确认导入store的相对路径完全正确，路径错误会导致拿到undefined传入Provider，直接触发Redux初始化报错中断整个React渲染流程，页面就会显示空白。

2. 排查Store配置语法错误 #

检查configureStore的配置项：

• configureStore接收的配置对象里必须是reducer字段，不要拼写成reducers/Reducer这类错误键名。
• 传入的slice reducer必须取slice实例的.reducer属性，不能直接把整个slice对象当reducer传入，这是新手最容易踩的坑：

// 错误写法
import counterSlice from './features/counter/counterSlice'
export const store = configureStore({
  reducer: {
    counter: counterSlice // 直接传slice对象会报错
  }
})

// 正确写法
import counterSlice from './features/counter/counterSlice'
export const store = configureStore({
  reducer: {
    counter: counterSlice.reducer // 必须取.reducer属性
  }
})

3. 排查Slice定义错误 #

检查counter模块的slice代码：

• createSlice必须传入非空的name字段、合法的initialState初始值，reducers字段下的操作方法不要有语法错误。
• 导出action时要从slice.actions中解构导出对应方法，不要把reducer方法直接当action导出，否则dispatch时会抛错中断渲染。

4. 排查组件内Hook使用错误 #

• useSelector、useDispatch两个Hook必须在React函数组件/自定义Hook的顶层作用域调用，写在条件判断、循环、普通非组件函数内都会触发React Hook规则报错，导致组件渲染失败。
• useSelector取状态值的路径要和store配置的键名完全匹配，比如store里counter模块挂载在counter键下，取count值要写useSelector(state => state.counter.value)，路径写错取到undefined后，如果直接对undefined做属性访问、数值运算，会抛出类型错误中断渲染。

快速定位技巧 #

打开浏览器开发者工具（F12）查看Console面板的报错栈，能直接定位90%的问题：

• 报could not find react-redux context value：Provider包裹/传参错误
• 报reducer is not a function：Store配置里传入的reducer不合法
• 报Hook调用相关错误：useSelector/useDispatch写在了不符合规则的位置

排查时可以先把所有Redux相关代码注释，只在App里渲染一行纯文本测试，确认React本身、脚手架配置无问题后，再逐段加回Redux逻辑，哪段代码加完后页面空白，问题就出在哪段。

内容的提问来源于stack exchange，提问作者Mehmet R. A.