[英]Problem passing redux state to react-navigation prop using connect()
我有一个 class 组件,它需要使用 redux state,但我注意到使用 connect() 对 @react-navigation 根本不起作用。 这是我当前的文件:
UserAuthenticationReducer
const initialState = null;
export let userAuthenticationReducer=(state = initialState, action)=>{
switch(action.type){
case "LOGIN":
return {
...state,
user:{
name:"Bobbington",
lastName: "TheThird"
}
};
case "LOGOUT":
return {
...state,user:null
}
default:
return state;
}
}
export default userAuthenticationReducer;
RootReducer
import userAuthenticationReducer from './Reducers';
import {combineReducers} from 'redux';
const rootReducer = combineReducers({
userAuthenticationReducer,
});
export default rootReducer;
登录连接
import {login,logout} from '../ReduxStates/LoginActions'
export const mapUserAuthenticationStateToProps = state => {
return {
user: state?.userAuthenticationReducer?.user
};
};
export const mapUserAuthenticationDispatchToProps ={
login,
logout
}
应用程序
const rootStore = createStore(rootReducer)
const App =()=> {
return (
<Provider store={rootStore}>
<MainRoutesContainer />
</Provider>
);
};
导航容器
import { NavigationContainer} from "@react-navigation/native";
import {createStackNavigator} from "@react-navigation/stack";
import {MainMenu} from "../Screens/MainMenu";
import React from 'react';
const Stack = createStackNavigator();
const StackRoute =()=>{
return(
<Stack.Navigator initialRouteName="MainMenu">
<Stack.Screen name="MainMenu" component={MainMenu} />
</Stack.Navigator>
)
}
export const MainRoutesContainer=()=>{
return(
<NavigationContainer>
<StackRoute />
</NavigationContainer>
)
}
主菜单
import { connect } from "react-redux"
import {mapUserAuthenticationStateToProps,mapUserAuthenticationDispatchToProps} from '../ReduxStates/LoginConnect'
export class MainMenu extends Component{
getUserState=()=>{
console.log(this.props.user)
}
render(){
return(
<Center flexDirection="column">
<Text>
Main Menu
</Text>
<Button title="Log user" onPress={(event) => this.getUserState(event)}/>
</Center>
);
}
}
export default connect(mapUserAuthenticationStateToProps,mapUserAuthenticationDispatchToProps)(MainMenu);
如果我记录 MainMenu 的 props.user,它将显示为未定义。 在挖掘了一段时间后,我看到如果你这样做:
const StackRoute =()=>{
let mainComponent = connect(mapUserAuthenticationStateToProps,mapUserAuthenticationDispatchToProps)(MainMenu);
return(
<Stack.Navigator initialRouteName="MainMenu">
<Stack.Screen name="MainMenu" component={mainComponent} />
</Stack.Navigator>
)
}
它会起作用,但只有在我使用 MainMenu 组件中减速器的 function 之后,否则它仍然会在安装时显示未定义。 使用带有 useSelector 钩子的功能组件是可行的,但这不是我被允许使用的选项。 我是在 connect() 上做错了什么,还是 React-Navigation v5 不适用于 redux 的 connect()?
您正在导入未连接的组件。 您export default
连接的组件,但正在导入命名的导出“MainMenu”,这是您未连接的组件。
你必须
import MainMenu from "../Screens/MainMenu";
代替
import {MainMenu} from "../Screens/MainMenu";
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.