🤔 Что такое редьюсер, и какие параметры он принимает?

В контексте JavaScript, редьюсер (reducer) — это функция, которая принимает текущее состояние и действие, а затем возвращает новое состояние. Редьюсеры широко используются в библиотеке Redux для управления состоянием приложения.

🚩Основная концепция

1⃣Принимает два аргумента
Текущее состояние (state)
Действие (action)
2⃣Возвращает новое состояние.

const reducer = (state, action) => {
    switch (action.type) {
        case 'ACTION_TYPE':
            // Возвращаем новое состояние
            return {
                ...state,
                // Обновляем определенные свойства
            };
        default:
            return state;
    }
};

🚩Пример использования редьюсера

Инициализация состояния

const initialState = {
    count: 0
};

Определение редьюсера

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

🚩Использование редьюсера с useReducer в React

React предоставляет хук useReducer для управления состоянием с помощью редьюсера в функциональных компонентах.

import React, { useReducer } from 'react';

const initialState = { count: 0 };

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

const Counter = () => {
    const [state, dispatch] = useReducer(counterReducer, initialState);

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

export default Counter;

Ставь 👍 и забирай 📚 Базу знаний