TG Telegram Group & Channel
Frontend | Вопросы собесов | United States America (US)
Create: Update:

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

В контексте 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;


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

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

В контексте 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;


Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍19


>>Click here to continue<<

Frontend | Вопросы собесов




Share with your best friend
VIEW MORE

United States America Popular Telegram Group (US)