javascript / intermediate
Snippet
Komplexer State mit useReducer
Der useReducer-Hook wird zur Verwaltung komplexer State-Logik in React verwendet. Er funktioniert ähnlich wie Redux, wobei eine Reducer-Funktion den nächsten State basierend auf dem aktuellen State und einer ausgelösten Action bestimmt.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const initialState = { count: 0 };function reducer(state, action) {switch (action.type) {case 'increment': return { count: state.count + 1 };case 'decrement': return { count: state.count - 1 };default: throw new Error('Unknown action type');}}function Counter() {const [state, dispatch] = React.useReducer(reducer, initialState);return (<>Count: {state.count}<button onClick={() => dispatch({ type: 'decrement' })}>-</button><button onClick={() => dispatch({ type: 'increment' })}>+</button></>);}
react
Erklärung
1
function reducer(state, action)
Eine pure Funktion, die den aktuellen State und eine Action entgegennimmt und ein neues State-Objekt zurückgibt.
2
const [state, dispatch] = useReducer(...)
Gibt den aktuellen State und eine Funktion zurück, mit der Actions an den Reducer gesendet werden.