State Management in React: Context API

State Management ist entscheidend für React-Anwendungen. Die Context API bietet eine einfache Möglichkeit, globale Zustände zu verwalten, ohne Prop-Drilling.

Grundlagen der Context API

Die Context API ermöglicht das Verwalten globaler Zustände direkt in React, ohne zusätzliche Bibliotheken.

Vorgehensweise

1. Erstellen des Kontextes

Erstellen eines Kontextes und einen Providers:

import React, { createContext, useState } from 'react';

const CountContext = createContext();

const CountProvider = ({ children }) => {
  const [count, setCount] = useState(0);

  return (
    <CountContext.Provider value={{ count, setCount }}>
      {children}
    </CountContext.Provider>
  );
};

export { CountProvider, CountContext };

2. Verwenden des Kontextes

Nutzen des Kontextes in einer Komponente:

import React, { useContext } from 'react';
import { CountContext } from './CountProvider';

const Counter = () => {
  const { count, setCount } = useContext(CountContext);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

export default Counter;

3. Einbinden des Providers

Wickeln der Anwendung in den Povider:

import React from 'react';
import ReactDOM from 'react-dom';
import { CountProvider } from './CountProvider';
import Counter from './Counter';

const App = () => (
  <CountProvider>
    <Counter />
  </CountProvider>
);

ReactDOM.render(<App />, document.getElementById('root'));

Fazit

Die Context API ist ideal für kleine bis mittelgroße Anwendungen, um globale Zustände zu verwalten, ohne Prop-Drilling zu benötigen.