Redux useSelector钩子多次触发咨询：点击按钮出现异常重复日志

问题背景 #

我刚接触Redux，已在src/store/sizeSlice.js中定义了一个slice，Redux store位于src/store/store.js。需求为点击addCol和addRow按钮时，分发action递增行数、列数的全局状态，我在App.js中使用了两个useSelector钩子。

现在点击任一按钮，控制台会输出四条日志：例如点击addRow时，会出现1条selectRow日志和3条selectCol日志。我知道函数组件（此处为App.js）重渲染时useSelector会被调用，预期应仅两条日志，但为何选择器函数会被调用三次？尤其未点击关联addCol action的按钮时也出现该情况？

原因分析与解决方案 #

1. React严格模式的开发环境特性 #

你的代码运行在React严格模式下（index.js中被<React.StrictMode>包裹），在开发环境中，严格模式会主动重复调用组件渲染、useSelector选择器等函数，目的是帮你检测代码中潜在的副作用问题。这是开发环境的专属行为，生产环境不会触发额外的调用。

2. 额外调用的具体逻辑 #

点击按钮触发Redux状态更新后，组件会触发重渲染：

• 严格模式下，组件会被两次调用渲染，加上Redux状态更新触发的一次初始选择器调用，就会出现多次日志输出的情况。
• 未点击addCol按钮时selectCol也被调用，是因为组件重渲染时所有useSelector都会执行，和是否触发对应action无关。

处理方式 #

• 若只是验证日志行为，可以暂时移除index.js中的<React.StrictMode>包裹，此时点击按钮后每个useSelector只会触发一次，符合预期。
• 生产环境中严格模式会自动禁用，线上不会出现这种额外调用。
• 建议日常开发保留严格模式，它能帮你提前发现代码中的隐患，不要因为日志次数问题就移除它。

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