React Router

• deklarative Zuordnung von Pfaden und Komponenten
• Extraktion von URL-Parametern
• Einfache Möglichkeit, URLs in SPAs zu nutzen um Application-State zu transportieren
• Übersichtliche API:
  • Router, Routes, Route ,Link (und ein paar andere)
  • useParams, useLocation, useNavigation

npm install react-router-dom

Prop Drilling

Übergabe von State als Props an Komponenten, die diesen nur weiterreichen, ohne ihn selbst zu verwenden.

Redux

• A Predictable State Container for JS Apps
• Zentraler Speicher für State
• Unidirektionaler Datenfluss

npm install redux react-redux

Store, Actions und Reducer

• Store speichert alle Daten und ermöglicht Zugriff (getState) und Änderung (dispatch)
• Action Nachricht über eine Änderung mit type und ggf. payload
• Reducer berechnet aus aktuellem State und einer Action den neuen State (newState = reducer(currentState, action))

Beispiel-Action

const remove = (id) => {
   const action = {
      type: 'REMOVE',
      payload: id,
   };
   return action;
}

const onClick = {
   const action = remove(4);
   store.dispatch(action);
}

<button onClick={onClick}>Remove</button>

Beispiel-Reducer

const initialState = [];

const favouritesReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'ADD': {
      return [...state, action.id];
    }
    case 'REMOVE': {
      return state.filter(id => id !== action.id);
    }
    default: {
      return state;
    }
  }
};

Beispiel-Store

import { createStore } from 'redux';
const store = createStore(favouritesReducer);

React + Redux

1. State bereitstellen

<Provider store={store}> <App /> </Provider>

1. Komponenten an State anbinden

// App-State zu Props umformen
const mapStateToProps = state => ({ isLoggedIn: state.user.isLoggedIn });

// State-Änderungen zu Props umformen
const mapDispatchToProps = dispatch =>
  ({ login: () => dispatch({ type: 'LOGIN_USER' }) });

connect(mapStateToProps, mapDispatchToProps)(Komponente)

Redux Hooks

• Lesen: useSelector (statt mapStateToProps)
• Schreiben: useDispatch (statt mapDispatchToProps)

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

const isLoggedIn = useSelector(state => state.user.isLoggedIn);

const dispatch = useDispatch();
const login = () => dispatch({ type: 'LOGIN_USER' });

Async Actions

npm install redux-thunk

import { applyMiddleware, createStore } from 'redux';
import thunk from 'redux-thunk';
const store = createStore(reducer, applyMiddleware(thunk));

react-query

• Server-Kommunikation und Caching

React Context & Reducer mit Hooks

• Context Hook useContext
• Reducer Hook useReducer