State Management in React: Redux

Redux ist eine beliebte State-Management-Bibliothek für komplexere React-Anwendungen. Es bietet eine zentrale Möglichkeit, den globalen Zustand zu verwalten.

Grundlagen von Redux

Redux besteht aus drei zentralen Konzepten:

• Store: Der zentrale Zustandsspeicher
• Actions: Ereignisse, die den Zustand ändern
• Reducers: Funktionen, die basierend auf Actions den neuen Zustand erstellen

Vorgehensweise

1. Installation

Installieren von Redux und React-Redux:

npm install redux react-redux

2. Erstellen des Redux-Stores

Erstellen eines Stores mit einem Reducer:

import { createStore } from 'redux';

const initialState = { count: 0 };

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    default:
      return state;
  }
};

const store = createStore(reducer);

export default store;

3. Einrichten des Providers

Verwenden des Providers, um den Store in der Anwendung verfügbar zu machen:

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import Counter from './Counter';

const App = () => (
  <Provider store={store}>
    <Counter />
  </Provider>
);

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

4. Verwenden von Redux in Komponenten

Nutzen von useSelector und useDispatch, um den Zustand und die Aktionen in Komponenten zu verwenden:

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';

const Counter = () => {
  const count = useSelector(state => state.count);
  const dispatch = useDispatch();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
    </div>
  );
};

export default Counter;

Fazit

Redux bietet eine robuste Lösung für das State Management in komplexen React-Anwendungen. Es erfordert etwas mehr Boilerplate-Code, bietet aber eine klare Trennung von Zustand und Logik.