RN+Redux应用登录后页面跳转：代码放置位置咨询

嗨，作为Redux新手碰到这个问题太正常啦！先给你划个核心红线：绝对不能在Reducer里做页面跳转！Reducer必须是纯函数，只能负责更新状态，不能包含任何副作用（比如导航、异步请求、甚至console.log都尽量别长期留在里面哦）。跳转逻辑要么放在ActionCreator里，要么在组件中监听状态变化来触发，下面给你两种实用的实现方式：

方式一：在ActionCreator中直接处理跳转（简单直接） #

这种方式适合小型项目或者简单场景，你只需要把React Navigation的navigation实例传递给ActionCreator，登录成功后直接调用导航方法即可：

修改你的ActionCreator代码 #

export const loginUser = ({email, password}, navigation) => {
  return (dispatch) => {
    Meteor.loginWithPassword(email, password, (error) => {
      if (error) {
        console.log('erreur dans le sign in')
        return dispatch ({type: LOGIN_USER_FAIL, payload: email});
      } else {
        console.log('pas d erreur dans le signin')
        dispatch({type: LOGIN_USER_SUCCESS, payload: email });
        // 登录成功后直接跳转到目标页面，替换成你的页面名称
        navigation.navigate('Home'); 
      };
    });
  };
};

在登录组件中传递navigation #

比如你的登录按钮点击事件里：

onPress={() => {
  const { email, password, navigation } = this.props;
  this.props.loginUser({ email, password }, navigation);
}}

方式二：组件监听Redux状态变化跳转（更符合Redux设计理念） #

这种方式把状态变化和副作用操作分离，更适合中大型项目，也更容易测试和维护。核心思路是让组件订阅登录状态，当状态变为“已登录”时触发跳转。

先优化你的AuthReducer #

给状态添加isAuthenticated字段，让登录状态更清晰：

// 初始化状态补充登录相关字段
const INITIAL_STATE = {
  email: '',
  password: '',
  isAuthenticated: false,
  loginError: null
};

export default (state= INITIAL_STATE, action) => {
  switch (action.type) {
    case EMAIL_CHANGED:
      return {...state, email: action.payload};
    case PASSWORD_CHANGED:
      return{...state, password: action.payload};
    case LOGIN_USER_FAIL:
      return {...state, loginError: error, isAuthenticated: false};
    case LOGIN_USER_SUCCESS:
      return {...state, email: action.payload, isAuthenticated: true, loginError: null};
    default:
      return state;
  }
};

在登录组件中监听状态变化 #

如果是类组件：

用componentDidUpdate生命周期监听状态变化：

componentDidUpdate(prevProps) {
  const { isAuthenticated, navigation } = this.props;
  // 仅当状态从未认证变为已认证时跳转
  if (!prevProps.isAuthenticated && isAuthenticated) {
    navigation.navigate('Home');
  }
}

如果是函数组件：

用useEffect钩子监听状态：

import { useEffect } from 'react';
import { useSelector } from 'react-redux';

const LoginScreen = ({ navigation }) => {
  // 从Redux中获取登录状态
  const isAuthenticated = useSelector(state => state.auth.isAuthenticated);

  useEffect(() => {
    // 登录状态为true时跳转
    if (isAuthenticated) {
      navigation.navigate('Home');
    }
  }, [isAuthenticated, navigation]);

  // 其他登录逻辑...
};

最后再强调一遍 #

• Reducer里绝对不能放跳转逻辑：Reducer是纯函数，只能做状态更新，任何有副作用的操作都不属于它的职责范围。
• 两种方式各有优劣：ActionCreator直接跳转简单快捷，适合小场景；组件监听状态跳转更符合Redux单向数据流的设计思想，扩展性更强。

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