使用connect()和NavigationContainer时如何访问Redux Action？

问题原因 #

• NavigationContainer 完全兼容 connect() 写法，你无法拿到actions的核心问题是错误地把redux注入的属性通过导航初始参数传递，且目标页面没有直接绑定redux。
• 你给Main组件套了connect，但声明Main函数时没有接收props参数，导致后续传递的initialParams={props}本身就是undefined；就算能拿到，initialParams也不会跟随redux状态更新，只会保留初始化时的快照。

最优解决方案 #

直接给需要访问redux的页面组件（比如Login）绑定connect，不要通过导航参数跨层传递redux属性，这是官方推荐的标准写法。

第一步：修改Login.js

import { connect } from 'react-redux';
import { mapStateToProps, mapDispatchToProps } from '../connect';
import { View, Text } from 'react-native';

// 直接从props解构redux注入的属性，以及导航自带的navigation、route
const Login = ({ navigation, route, auth, actions }) => {
  console.log('redux state auth：', auth);
  // 直接调用绑定好的action
  console.log('redux actions：', actions);
  // 调用login action示例：actions.login(传入参数)

  return (
    <View style={styles.container}>
      {auth.status === 'logged in' ? (
        <Text>Go To Profile</Text>
      ) : (
        <Text>Stay Here</Text>
      )}
    </View>
  );
};

// 给Login组件套connect，直接注入redux属性
export default connect(mapStateToProps, mapDispatchToProps)(Login);

第二步：修改Main.js，删除无效的initialParams

import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import Login from './screens/Login';

// Main组件本身不需要用到redux属性的话，可以直接去掉connect包裹
const Main = () => {
  const Stack = createNativeStackNavigator();

  return (
    <NavigationContainer>
      <Stack.Navigator
        initialRouteName="Login"
        screenOptions={{
          headerTransparent: true,
          headerTintColor: colors.yellow,
        }}>
        <Stack.Screen
          name="Login"
          component={Login}
          options={{headerShown: false}}
          {/* 删掉无用的initialParams配置 */}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default Main;

补充说明 #

你之前的mapDispatchToProps写法已经把所有action绑定到了actions属性下，所以在组件内直接通过props.actions.xxx()调用对应action即可，不需要额外导入action creator。

内容的提问来源于stack exchange，提问作者Hajar Alharazi