使用 connect() 将 redux 状态传递给 react-navigation 道具的问题

Question

我有一个需要使用 redux 状态的类组件，但我注意到使用 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 组件中的 reducer 的函数之后，否则它仍然会在挂载时显示为 undefined。使用带有 useSelector 钩子的功能组件是可行的，但这不是我被允许使用的选项。我是在使用 connect() 时做错了什么，还是 React-Navigation v5 不适用于 redux 的 connect()？

Answer 1

您正在导入未连接的组件。您export default 已连接组件，但正在导入命名导出“MainMenu”，这是您未连接的组件。

你必须

import MainMenu from "../Screens/MainMenu";

而不是

import {MainMenu} from "../Screens/MainMenu";