React-Navigation问题：Reducer未被触发调用

Hey there! Let's tackle that React Navigation reducer issue you're hitting while integrating react-native-globalize into your updated boilerplate. I've worked through similar problems before, so here's a structured approach to fix it:

First, let's break down the common culprits when your navigation reducer stops triggering, especially after adding an internationalization layer:

1. Validate Redux Store Configuration (if using Redux) #

• Ensure you've properly combined the navigation reducer with your root reducer after setting up the globalize reducer. Incorrect nesting or missing the navigation reducer entirely will prevent it from receiving actions.
• Example of a correct root reducer setup:

  import { combineReducers } from 'redux';
  import { globalizeReducer } from 'react-native-globalize';
  import { navigationReducer } from './navigation'; // Your navigation reducer file
  
  const rootReducer = combineReducers({
    globalize: globalizeReducer,
    navigation: navigationReducer, // Critical: Don't omit this
    // Add other app reducers here
  });
  
  export default rootReducer;
  

2. Check Navigation Action Dispatch Flow #

• When updating locales, make sure navigation actions are being dispatched correctly. If you're wrapping locale changes in thunks/sagas, ensure you're not accidentally blocking navigation actions from reaching the reducer.
• Use a logger middleware (like redux-logger) to confirm navigation actions are appearing in the log when triggered—if they're missing, the issue is in how you're dispatching them.

3. Verify Globalize Provider Placement #

• The GlobalizeProvider needs to wrap your entire navigation container, not the other way around. Nesting it inside the navigation stack can disrupt action propagation to the reducer.

  // Correct component hierarchy
  import { GlobalizeProvider } from 'react-native-globalize';
  import { NavigationContainer } from '@react-navigation/native';
  
  const App = () => (
    <GlobalizeProvider locale="en">
      <NavigationContainer>
        {/* Your full navigation stack goes here */}
      </NavigationContainer>
    </GlobalizeProvider>
  );
  

4. Confirm Dependency Compatibility #

• Since you updated all boilerplate dependencies, double-check that your React Navigation version is compatible with both react-native-globalize and your React Native version. Version mismatches often cause silent reducer failures.
• Run npm list @react-navigation/native (or yarn list @react-navigation/native) to check installed versions, and cross-reference with compatibility notes for react-native-globalize.

5. Isolate the Issue with a Minimal Setup #

• Create a stripped-down navigation stack (just one screen + a button that triggers a navigate action). If the reducer fires here, the problem lies in how your full stack interacts with the globalize integration.
• Gradually reintroduce your original screens and globalize code to pinpoint exactly where the reducer stops responding.

If none of these steps resolve the issue, sharing snippets of your navigation reducer setup and how you're dispatching locale change actions would help narrow things down further!

内容的提问来源于stack exchange，提问作者Anders Gerner