react-native - 如何在使用 connect() 和 NavigationContainer 时访问 redux 操作

Question

我正在使用 Redux 和NavigationContainer. 我正在使用useSelector()，useDispatch()一切正常。

要继续前进，我们必须使用and来connect(mapStateToProps, mapDispatchToProps)(Component);代替。useSelector()useDispatch()

根据我在阅读文章和文档时的理解，我可以从props传入的同一组件中访问状态值和操作connect()。

就我而言，我能找到的唯一参数是({navigation, route})，我可以像这样访问状态：route.params。我尝试使用navigationand访问这些操作route，但不幸的是没有用。

连接.js

import {
  login,
  loggout,
} from './redux/actions';

export const mapStateToProps = state => ({
  auth: state.auth,
});

const ActionCreators = Object.assign(
  {},
  login,
  loggout,
);

export const mapDispatchToProps = dispatch => ({
  actions: bindActionCreators(ActionCreators, dispatch),
});

应用程序.js

import {Provider} from 'react-redux';
import {PersistGate} from 'redux-persist/integration/react';
import Main from './Main';
import configureStore from './store';

const App = () => {
  const {store, persistor} = configureStore();

  return (
    <Provider store={store}>
      <PersistGate persistor={persistor}>
        <Main />
      </PersistGate>
    </Provider>
  );
};

export default App;

主.js

import {connect} from 'react-redux';
import {mapStateToProps, mapDispatchToProps} from './connect';
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import Login from './screens/Login';

export 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={props}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default connect(mapStateToProps, mapDispatchToProps)(Main);

登录.js

import {login} from '../redux/actions';
import {
  View,
  Text,
} from 'react-native';


const Login = ({navigation, route}) => {
  console.log('from Login');
  console.log(route.params); // state access
  // Here, how can I access the redux actions?
  console.log('-----------------');

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

问题是，我无法使用道具访问 redux 操作。我怎样才能访问它们？是否NavigationContainer适用于connect()？如果我不使用NavigatorContainer，我可以访问类似的操作：props.actionName()，但导航是另一种情况。

标签： react-nativereduxreact-navigation