React: Do czego służy useReducer?

Czym jest useReducer?

useReducer to hook, który służy do rozdzielenia logiki zarządzania stanem a renderowaniem. Jest to szczególnie przydatne, gdy stan komponentu jest bardziej złożony niż proste typy takie jak: string czy number. Na przykład tablica elementów. Manipulowanie danymi jak: dodawanie, edytowanie i kasowanie sprawia, że komponent coraz bardziej się rozrasta. Dzięki useReducer można przenieść całą logikę zarządzania stanem do jednego miejsca.

Podobny jest do useState. useReducer powinno się używać do zarządzania stanem, który jest bardziej złożony niż proste typy.

Składnia useReducer

Użycie useReducer jest bardziej złożone niż useState. Przyjmuje dwa parametry:

const [state, dispatch] = useReducer(reducer, initialState)

Pierwszy parametr to funkcja, która będzie zarządzać stanem. To tam znajduje się cała logika odpowiedzialna za przetwarzanie danych. Drugi argument to wartość, jaką ma mieć domyślnie nasz stan.

useReducer zwraca tablicę z dwoma elementami. Pierwszy: state zawiera aktualny stan. Drugi: dispatch to funkcja, która służy do komunikacji ze stanem. Dzięki niej informujemy, jak stan powinien zostać zaktualizowany.

Jak wspomniałem do useReducer w pierwszym parametrze przekazujemy funkcję zarządzającą stanem. Przyjmuje ona dwa parametry:

function reducer(state, action)

state to aktualny stan. action to obiekt, który zawiera informacje, jak stan ma zostać zaktualizowany.

Przykłady

Przykład 1

import React, { useReducer } from 'react';

const ACTIONS = {
    INCREMENT: 'increment',
    DECREMENT: 'decrement',
    RESET: 'reset'
}
const initialState = {
    counter: 0
}

function reducer(state, action) {
    switch (action.type) {
        case ACTIONS.INCREMENT:
            return {
                counter: state.counter + 1
            };

        case ACTIONS.DECREMENT:
            return {
                counter: state.counter - 1
            };

        case ACTIONS.RESET:
            return {
                counter: 0
            };

        default:
            throw Error('Reducer: Unknown action!');
    }
}

const App = () => {
    const [state, dispatch] = useReducer(reducer, initialState);

    return (
        <>
            <div>
                <h1>{state.counter}</h1>
            </div>
            <div>
                <button onClick={() => {
                    dispatch({ type: ACTIONS.INCREMENT })
                }}>Increment</button>

                <button onClick={() => {
                    dispatch({ type: ACTIONS.DECREMENT })
                }}>Decrement</button>

                <button onClick={() => {
                    dispatch({ type: ACTIONS.RESET })
                }}>Reset</button>
            </div>
        </>
    );
}

Przykład 2

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

const ACTIONS = {
    ADD: 'add',
    REMOVE: 'remove',
}

function reducer(state, action) {
    switch (action.type) {
        case ACTIONS.ADD:
            return [...state, action.payload.item];

        case ACTIONS.REMOVE:
            return state.filter((item) => item.id !== action.payload.id);

        default:
            throw Error('Reducer: Unknown action!');
    }
}

const ItemList = ({ id, title, dispatch }) => {
    return (
        <>
                <strong>{title}</strong>
                <button onClick={() => {
                    dispatch({ type: ACTIONS.REMOVE, payload: { id }, })
                }}>Remove</button>

        </>
    )
}

function newItem(title) {
    return {
        title,
        id: Date.now()
    }
}

const App = () => {
    const [title, setTitle] = useState('');
    const [state, dispatch] = useReducer(reducer, []);

    return (
        <>
            <div>
                <input type="text" value={title} onChange={(e) => setTitle(e.target.value)} />
                <button onClick={() => {
                    dispatch({
                        type: ACTIONS.ADD,
                        payload: {
                            item: newItem(title)
                        }
                    });
                    setTitle('');
                }}>Add</button>
            </div>
            <div>
                <ul>
                    {state.map((item) => {
                        return <li key={item.id}><ItemList id={item.id} title={item.title} dispatch={dispatch} /></li>
                    })}
                </ul>
            </div>
        </>
    );
}