redux - 在 React Navigation 5 中的 redux 状态更改后,导航器不会重新渲染
问题描述
我正在使用带有 redux 的 react navigation v5 中的堆栈导航器。isAuthenticated
堆栈导航器应在is时呈现 AuthScreen并在更改为时false
呈现 HomeScreen 。isAuthenticated
true
应用导航.js
import React, {useState, useEffect} from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import { connect } from 'react-redux';
import AuthScreen from '../screens/AuthScreen';
import HomeScreen from '../screens/HomeScreen';
const Stack = createStackNavigator();
const AppNav = ({isAuthenticated}) => {
const [logged, setLogged] = useState(false)
useEffect(() => {
if(isAuthenticated) {
console.log(logged);
setLogged(true);
} else {
setLogged(false);
console.log(logged);
}
},[isAuthenticated])
return (
<NavigationContainer>
<Stack.Navigator>
{
!logged?
<Stack.Screen name='Auth' component={AuthScreen} options={{headerShown: false}} />
:<Stack.Screen name='Home' component={HomeScreen} options={{headerShown: false}} />
}
</Stack.Navigator>
</NavigationContainer>
);
}
const mapStateToProps = ({isAuthenticated}) => {
return {
isAuthenticated
};
}
export default connect(mapStateToProps, null)(AppNav)
userAction.js
import {LOGIN_WITH_FACEBOOK} from './types';
export const loginWithFacebook = () => async(dispatch) => {
dispatch( { type: LOGIN_WITH_FACEBOOK, payload: {isAuthenticated: true} } );
}
userReducer.js
import {LOGIN_WITH_FACEBOOK} from '../actions/types.js';
const INITIAL_STATE = {
isAuthenticated: false
};
const userReducer = (state=INITIAL_STATE, action) => {
switch(action.type){
case LOGIN_WITH_FACEBOOK:
return {...state, ...action.payload};
default:
return state;
}
}
export default userReducer
rootReducer.js
import {combineReducers} from 'redux';
import userReducer from './userReducer';
const rootReducer = combineReducers({
user: userReducer
})
export default rootReducer
解决方案
通过访问 userReducer 的密钥来修复它state.user
。
应用导航.js
const mapStateToProps = (state) => {
return {
isAuthenticated: state.user.isAuthenticated
};
}
export default connect(mapStateToProps, null)(AppNav)
推荐阅读
- google-api - Google Tagmanager 批处理请求 javascript 受配额限制
- c# - Serilog + Azure - Log Analytics 工作区中没有出现自定义日志
- javascript - 作为开发人员,如何保持 Google Chrome 扩展弹出窗口打开?
- .net - 如何设置 SDK 存储以保护生产环境中的 AWS 凭证
- python - 如何使用上下文管理器锁定
- javascript - 有什么方法可以在 form.io 中本地使用嵌套表单?
- java - 如何使用 Java Springboot 返回一个 zip 文件流
- python - 如何使用 Azure DataBricks Api 提交作业?
- python-3.x - 如何在 Django 中将@property 添加到基本组模型?
- datatable - 将自定义数据值设置为 DataTable 中的列