React Native+Redux应用中Reducer被调用两次问题求助

嘿，我之前也碰到过类似的Redux reducer重复触发的问题，结合你提供的注册页面代码片段，咱们一步步来排查和解决这个问题：

一、先排查最常见的触发源：Action被重复调用 #

1. 检查注册按钮的事件绑定
   看看你的注册按钮（Button或TouchableOpacity）的onPress回调，是不是不小心写了两次register调用？比如类似这样的错误：

   <Button onPress={() => { props.register(userData); props.register(userData); }} />
   

   另外还要留意TextInput的onSubmitEditing有没有也绑定了注册逻辑，导致点击按钮+回车提交都触发了一次action。

2. 检查Action Creator的实现
   如果你的register是异步action（比如用了redux-thunk），看看是不是在内部重复dispatch了相同的action：

   // 错误示例：重复dispatch
   export const register = (userData) => {
     return (dispatch) => {
       dispatch({ type: REGISTER, payload: userData });
       dispatch({ type: REGISTER, payload: userData }); // 多余的一次dispatch
     }
   }
   

二、检查React Native开发环境的Strict Mode影响 #

React Native默认在开发环境下会开启<React.StrictMode>，它会主动重复调用reducer、组件生命周期方法来检测潜在的副作用问题。这是开发环境的正常行为，生产环境会自动消失。

你可以去入口文件（比如App.js）看看是不是包裹了<React.StrictMode>，如果想验证这个问题，可以暂时注释掉它，看看reducer是不是不再被调用两次了。

三、检查Redux Store和中间件配置 #

1. 避免重复创建Store
   检查你的store配置文件，是不是不小心多次调用了createStore或configureStore？比如在多个组件里都初始化了store，导致多个实例同时触发reducer。

2. 检查中间件是否重复应用
   看看applyMiddleware里是不是重复添加了同一个中间件（比如redux-thunk、redux-saga），这会导致action被中间件多次处理，最终触发reducer多次。

四、组件重复渲染导致的重复触发 #

如果你的注册页面组件被不必要地重复渲染，也可能导致action被多次调用。你可以用React.memo包裹组件，避免无意义的重渲染：

const RegisterScreen = React.memo((props) => {
  // 你的组件原有代码
});

export default connect(mapStateToProps, { register })(RegisterScreen);

五、快速定位问题的调试技巧 #

在reducer和action creator里加日志，精准定位问题环节：

1. 在reducer里打印触发的action：

   const registrationReducer = (state = initialState, action) => {
     console.log('触发的Action:', action);
     switch(action.type) {
       case REGISTER:
         // 你的处理逻辑
       default:
         return state;
     }
   }
   

2. 在action creator里打印调用记录：

   export const register = (userData) => {
     console.log('Register Action被调用');
     return { type: REGISTER, payload: userData };
   }
   

通过日志你就能清楚知道：是action被调用了两次，还是reducer被重复触发了。

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