退出后仪表板屏幕不会重定向 - Redux、React 导航、React native

Question

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

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;
}
};

Dashboard.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

reducer文件中似乎存在错误当您注销时，重置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>
);
};

希望你的问题能得到解决。