reactjs - useContext- und useReducer-Hooks funktionieren nicht. Fehler: Kann Eigenschaft 'state' von undefined nicht lesen

Ich versuche, das Redux-Konzept in React Native mithilfe von createContext, useReducer und useContext zu implementieren. Unten sind meine Code-Dateien:

Store.tsx

import React, { useReducer, createContext } from "react";
import { View, Text, StyleSheet, Button } from "react-native";

export const myContext = createContext();

export default function Store(props) {
  const counter = 0;
  const [state, dispatch] = useReducer((state, action) => {
    return state + action;
  }, counter);
  return (
    <myContext.Provider value={{ state, dispatch }}>
      {props.children}
    </myContext.Provider>
  );
}

App.tsx

import React, { useState, useContext, useEffect, createContext } from            "react";
import { View, Text, StyleSheet, Button } from "react-native";
import Store, { myContext } from "./components/Store";

export default function App(): JSX.Element {
  const { state, dispatch } = useContext(myContext);

  return (
    <View style={styles.wrapper}>
      <Text>HEY</Text>
      <Store>
        <Text>Counter: {state}</Text>
        <Button title="Incr" onPress={() => dispatch(1)} />
        <Button title="Decr" onPress={() => dispatch(-1)} />
      </Store>
    </View>
  );
}

const styles = StyleSheet.create({
  wrapper: {
    marginTop: 100
  }
});

Ich bin mir nicht sicher, warum ich in useContex nicht auf 'State' zugreifen kann. Ich bekomme den Fehler "Cannot read property 'state' of undefined". Könnte mir bitte jemand helfen? Es wäre sehr hilfreich, wenn Sie auch eine gute Erklärung mit Details geben könnten.

Antwort #1

Sie können nur auf den Wert eines Kontexts in einer untergeordneten Komponente des Kontext-Providers zugreifen. In diesem Fall rufen Sie useContext oberhalb der Stelle auf, an der der Provider gerendert wird, innerhalb von Store. In diesen Fällen wird der standardmäßig an createContext übergebene Wert verwendet. In diesem Fall wurde createContext() ohne Standardwert aufgerufen, sodass er undefined ist. Daher führt der Versuch, undefined zu destrukturieren const { state, dispatch }=useContext(myContext); zu dem Fehler, den Sie sehen.

Das Hinzufügen einer zusätzlichen Kindkomponente sollte es zum Laufen bringen. So etwas wie:

import React, { useState, useContext, useEffect, createContext } from            "react";
import { View, Text, StyleSheet, Button } from "react-native";
import Store, { myContext } from "./components/Store";

export default function AppWrapper(): JSX.Element {
  // Store, renders the provider, so the context will be accessible from App.
  return (
    <Store>
      <App />
    </Store>
  )
}

function App(): JSX.Element {
  const { state, dispatch } = useContext(myContext);

  return (
    <View style={styles.wrapper}>
      <Text>HEY</Text>
      <Text>Counter: {state}</Text>
      <Button title="Incr" onPress={() => dispatch(1)} />
      <Button title="Decr" onPress={() => dispatch(-1)} />
    </View>
  );
}

const styles = StyleSheet.create({
  wrapper: {
    marginTop: 100
  }
});