Как получить доступ к редуктору внутри приложения, используя React Navigation v5 в React Native?

Question

Я пытаюсь создать приложение с React Navigation v5 и застрял в потоке аутентификации. Вот некоторый код, чтобы понять, что я пытаюсь сделать:

const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();
const AuthContext = React.createContext();

export default class App extends Component {
  // constructor() ...

render() {
  const store = configureStore(); // rootReducer

  return (
    <AuthContext.Provider store={store}>
      <NavigationContainer>
        // here I have to access my userReducer to check is user logged in and using LoginStack or Drawer
)
        // my stacks
}

Итак, в документах React Navigation потоки аутентификации используют компоненты функций и внутри них React Hooks. Но я использую класс-компонент, и у меня есть мой редуктор в отдельном файле. Я пытался использовать connect (), как всегда для дочерних компонентов в моем приложении, но это не сработало.

Так есть ли способ доступа (или сопоставления) редуктора к приложению на самом верхнем уровне? Или, может быть, я что-то не так делаю, и есть лучший способ создать коммутатор между двумя отдельными стеками на основе аутентификации?

Answer 1

Я не уверен, что это лучший способ, но вам нужно будет просто использовать реакционные хуки и подписку на избыточность:

export default function Navigation({store}) {

  const [authorized, setAuthorized] = useState(
    store.getState().user.auth !== null,
  );

  useEffect(() => {
    const unsubscribe = store.subscribe(() => {
      setAuthorized(store.getState().user.auth !== null);
    });

    return () => { unsubscribe(); }
  });

  return (
    <NavigationContainer>
      {authorized ?
        <Stack.Navigator>...</Stack.Navigator> : <Stack.Navigator>...</Stack.Navigator>}
    </NavigationContainer>
  )
}

Затем передайте свой магазин:

export default class App extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <Navigation store={store} />
      </Provider>
    );
  }
}