注销后仪表板屏幕不重定向 - Redux、React 导航、React 本机

Question

我正在使用带有 react native 和 react 导航的 redux。登录时一切正常，但是当我注销时，它不会将我重定向回登录屏幕。后端的应用流程是：从 google 获取令牌 > 发送到 nodejs 服务器以使用相同的客户端 ID 进行验证 > 创建新用户或获取现有用户 > 使用 JWT 签署用户 ID > 发回新令牌。这是我的代码

Authnavigator.js

...

import {AuthScreens, DashboardScreens} from './AppNavigator';

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

const AuthNavigator = () => {
  const userGoogleLogin = useSelector(state => state.userGoogleLogin);
  const {loading, userInfo} = userGoogleLogin;

  return (
    <NavigationContainer>
      {userInfo && <DashboardScreens />}
      {!userInfo && <AuthScreens />}
    </NavigationContainer>
  );
};

export default AuthNavigator;

userAction.js

import axios from 'axios';
import {
  GOOGLE_USER_LOGIN_REQUEST,
  GOOGLE_USER_LOGIN_SUCCESS,
  GOOGLE_USER_LOGIN_FAIL,
  GOOGLE_USER_LOGOUT,
} from '../constants/userConstants';

import {GoogleSignin} from '@react-native-google-signin/google-signin';

export const googleLogin = idToken => async dispatch => {
  try {
    // request action
    dispatch({type: GOOGLE_USER_LOGIN_REQUEST});

    // set content type
    const config = {
      headers: {
        'Content-Type': 'application/json',
      },
    };

    // send post request
    const {data} = await axios.post(
      `https://still-eyrie-92675.herokuapp.com/api/auth/google`,
      {
        token: idToken,
      },
    );

    // send back user data
    dispatch({
      type: GOOGLE_USER_LOGIN_SUCCESS,
      payload: data,
    });
  } catch (error) {
    dispatch({
      type: GOOGLE_USER_LOGIN_FAIL,
      payload: error,
    });
  }
};

export const googleLogout = () => async dispatch => {
  await GoogleSignin.revokeAccess();
  await GoogleSignin.signOut();
  dispatch({type: GOOGLE_USER_LOGOUT});
};

userReducer.js

import {
  GOOGLE_USER_LOGIN_REQUEST,
  GOOGLE_USER_LOGIN_SUCCESS,
  GOOGLE_USER_LOGIN_FAIL,
  GOOGLE_USER_LOGOUT,
} from '../constants/userConstants';

export const userGoogleLoginReducer = (state = {}, action) => {
  switch (action.type) {
    case GOOGLE_USER_LOGIN_REQUEST:
      return {loading: true};
    case GOOGLE_USER_LOGIN_SUCCESS:
      return {loading: false, userInfo: action.payload};
    case GOOGLE_USER_LOGIN_FAIL:
      return {loading: false, error: action.payload};
    case GOOGLE_USER_LOGOUT:
      return {};
    default:
      return state;
  }
};

仪表板.js

...
// redux
import {useDispatch, useSelector} from 'react-redux';
import {googleLogout} from '../actions/userAction';

export default function Dashboard({navigation}) {
  const dispatch = useDispatch();

  const userGoogleLogin = useSelector(state => state.userGoogleLogin);
  const {loading, error, userInfo} = userGoogleLogin;

  return (
    <Background>
      <Logo />
      <Header>Let’s start</Header>
      <Paragraph>
        Your amazing app starts here. Open you favorite code editor and start
        editing this project.
      </Paragraph>
      <Button mode="outlined" onPress={() => dispatch(googleLogout())}>
        Logout
      </Button>
    </Background>
  );
}

Answer 1

错误似乎在您的减速器文件中 当您注销时重置您的 userInfo 值

case GOOGLE_USER_LOGOUT:
  return {userInfo: null, loading: false};

因为为什么您的 userInfo 值没有重置并且您的 {userInfo && } 条件为真

我还有一个建议是使用像这样的三元运算符，它看起来更易读

{userInfo ? <DashboardScreens />: <AuthScreens />}

Answer 2

问题出在我的导航器上，与 redux 无关。解决了。​​

Answer 3

试试下面的代码

const AuthNavigator = () => {
  const {loading, userInfo} = useSelector(state => state.userGoogleLogin);

  return (
    <NavigationContainer>
      {userInfo && <DashboardScreens />}
      {!userInfo && <AuthScreens />}
    </NavigationContainer>
  );
};

希望您的问题能够得到解决。