React - Context API

Das Durchreichen von Props kann bei größeren Anwendungen die Komplexität erhöhen, was folgendes Beispiel zeigt:

Es gibt verschiedene Möglichkeiten das Problem zu lösen.

Option 1 - Komponentenstruktur ändern

• Vorher

//App.jsx
<Shop onAddItemToCart={handleAddItemToCart} />

//Shop.jsx
import { DUMMY_PRODUCTS } from "../dummy-products.js";
import Product from "./Product";

export default function Shop({ onAddItemToCart }) {
  return (
    <section id="shop">
      <h2>Elegant Clothing For Everyone</h2>
      <ul id="products">
        {DUMMY_PRODUCTS.map((product) => (
          <li key={product.id}>
            <Product {...product} onAddToCart={onAddItemToCart} />
          </li>
        ))}
      </ul>
    </section>
  );
}

• Nacher

//App.jsx
   <Shop onAddItemToCart={handleAddItemToCart}>
      {DUMMY_PRODUCTS.map((product) => (
          <li key={product.id}>
            <Product {...product} onAddToCart={handleAddItemToCart} />
          </li>
        ))}
      </Shop>

//App.jsx
export default function Shop({ children }) {
  return (
    <section id="shop">
      <h2>Elegant Clothing For Everyone</h2>
      <ul id="products">
        {children}
      </ul>
    </section>
  );
}

Option 2 - Context API

• 
• createContext() erzeugt ein Objekt, welches eine React Komponente enthält

//shopping-cart-context.jsx
import { createContext } from "react";
export const CartContext = createContext({
    items: []
});

//App.jsx
...
  return (
    <>
      <CartContext>
        <Header
          ...
        />
        <Shop ...>...
        </Shop>
      </CartContext>
    </>
  );

• Nutzung des Context mit use oder useContext

//Cart
import { use } from "react";
import { CartContext } from "../store/shopping-cart-context";

export default function Cart({ onUpdateItemQuantity }) {
  const {items} = use(CartContext);
  const totalPrice = items.reduce(
    (acc, item) => acc + item.price * item.quantity,
    0
  );

Beispiel anhand Änderung des Theme(Schwarz/Weiß Modus)

//ThemeContextProvider.jsx
import { createContext, useState } from "react";
export const ThemeContext = createContext({
    theme: '',
    changeTheme: () => { },
})

export default function ThemeContextProvider({ children }) {
    const [theme, setTheme] = useState('light');
    const toggleTheme = () => {
        setTheme((prevTheme) => {
          return prevTheme === 'light' ? 'dark' : 'light';
        });
      };
    const ctxValue = {
        theme: theme,
        changeTheme: toggleTheme,
    };
    return <ThemeContext.Provider value={ctxValue}>{children}</ThemeContext.Provider>
}

• Context in App nutzen

//App.jsx
import Page from './Page';
import ThemeContextProvider from './ThemeContextProvider';

function App() {
  return (
    <ThemeContextProvider>
      <Page />
    </ThemeContextProvider>
  );
}
export default App;

• State des Context in den jeweiligen Komponenten nutzen

//Header.jsx
import { useContext } from "react";
import { ThemeContext } from "./ThemeContextProvider";

export default function Header() {
    const {changeTheme} = useContext(ThemeContext);
    return (
      <header>
        <h1>Demo Website</h1>
        <button onClick={changeTheme}>Toggle Theme</button>
      </header>
    );
}

• Veränderung des Context um Styling zu ändern

//Page.jsx
import { useContext } from 'react';
import Header from './Header';
import { ThemeContext } from './ThemeContextProvider';

export default function Page() {
    const { theme } = useContext(ThemeContext);
    return (
        <div id="app" className={theme}>
            <Header />
            <article>
                <h2>React Course</h2>
                <p>A course that teaches you React from the ground up and in great depth!
                </p>
            </article>
        </div>
    );
}