Redux中returnSlidesReducer函数执行两次的原因排查求助

我来帮你排查这个问题，看了你的代码，主要有两个关键点需要注意：

1. 模块加载时的手动调用触发第一次执行 #

你的slides.js文件最后有一行returnSlidesReducer(jsonFile)，这行代码会在模块被import的时候立刻执行——也就是应用刚启动、Redux还没正式使用这个reducer的时候，它就已经跑了一次。这就是你看到第一次console.log的原因。

Reducer是给Redux Store调用的，完全不需要你手动执行。你应该删掉这行调用，同时可以把JSON文件设置为reducer的默认参数，作为Store的初始状态。修改后的代码如下：

import jsonFile from '../sliderContent.json';
const returnSlidesReducer = (slidesContent = jsonFile) => {
  console.log(slidesContent);
  return slidesContent;
}
// 移除这行手动调用：returnSlidesReducer(jsonFile);
export default returnSlidesReducer;

2. React Strict Mode导致的开发环境二次执行 #

如果删掉手动调用后，你还是看到reducer执行两次，那大概率是React Strict Mode的特性。在开发环境下，Strict Mode会故意让纯函数（包括Redux reducer、组件渲染函数等）执行两次，目的是帮你检测意外的副作用——比如在reducer里修改传入参数、执行异步操作这类违反Redux规则的行为。

这种情况是正常的，生产环境下Strict Mode会自动禁用，不会出现重复执行的问题。如果你想验证，可以暂时把index.js里的<React.StrictMode>标签移除，就能看到reducer只执行一次了。

总结 #

先移除reducer文件里的手动调用，这是不必要的错误操作；如果还有两次执行，那就是Strict Mode的开发环境检测机制，无需担心，生产环境会恢复正常。

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