Frontend | Вопросы собесов on Telegram: “📌 Что такое редакс? 💬 Спрашивают в 3% собеседо…”

📌 Что такое редакс?

💬 Спрашивают в 3% собеседований

Redux — это библиотека для управления состоянием приложений, часто используемая с библиотекой React, но она может быть использована и с другими библиотеками или фреймворками JavaScript. Redux предоставляет централизованное хранилище (store) для всех состояний приложения, что упрощает управление и отладку состояний.

🤔 Основные концепции

1️⃣ Хранилище (store):

➕ Является объектом, который содержит все состояние приложения. В приложении может быть только одно хранилище.

2️⃣ Действия (actions):

➕ Действия — это объекты, которые отправляются в хранилище для изменения состояния. Они должны иметь тип (type), который описывает тип действия, и могут содержать дополнительные данные (payload).

3️⃣ Редюсеры (reducers):

➕ Это чистые функции, которые принимают текущее состояние и действие в качестве аргументов и возвращают новое состояние. Они описывают, как состояние приложения изменяется в ответ на действия.

4️⃣ Диспетчеры (dispatch):

➕ Отправляют действия в хранилище. Это единственный способ изменить состояние в Redux.

5️⃣ Подписки (subscriptions):

➕ Позволяют компонентам подписываться на изменения состояния в хранилище и реагировать на эти изменения.

🤔 Пример

Для начала установим необходимые пакеты:

npm install redux react-redux

Создание действий (actions)

// actions.js
export const increment = () => ({
  type: 'INCREMENT',
});

export const decrement = () => ({
  type: 'DECREMENT',
});

Создание редюсера (reducer)

// reducer.js
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;
  }
};

export default counterReducer;

Создание хранилища (store)

// store.js
import { createStore } from 'redux';
import counterReducer from './reducer';

const store = createStore(counterReducer);

export default store;

Подключение Redux к React

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './App';
import store from './store';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

Использование состояния и действий

// App.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from './actions';

const App = () => {
  const count = useSelector(state => state.count);
  const dispatch = useDispatch();

  return (
    <div>
      <h1>Counter: {count}</h1>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
    </div>
  );
};

export default App;

🤔 Преимущества

1️⃣ Централизованное управление состоянием:

➕ Все состояние приложения находится в одном месте, что упрощает управление и отладку.

2️⃣ Предсказуемость:

➕ Поскольку редюсеры являются чистыми функциями, их поведение предсказуемо, что облегчает тестирование и отладку.

3️⃣ Легкость тестирования:

➕ Действия и редюсеры легко тестировать из-за их чистоты и изолированности.

4️⃣ Возможность временной петли (time travel):

➕ Инструменты разработки Redux позволяют перемещаться по истории состояний, что облегчает отладку.

Redux — это библиотека для управления состоянием приложений, предоставляющая централизованное хранилище для всех состояний. Основные концепции Redux включают хранилище (store), действия (actions), редюсеры (reducers), диспетчеры (dispatch) и подписки (subscriptions). Redux часто используется с React, но может быть применен и с другими библиотеками.

🔥 ТОП ВОПРОСОВ С СОБЕСОВ

🔒 База собесов | 🔒 База тестовых