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

Что такое redux ?

Спросят с вероятностью 7%



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



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



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

Хранилище — это объект, который содержит всё состояние приложения. В Redux может быть только одно хранилище. Оно создается с помощью функции createStore.

      import { createStore } from 'redux';

   const store = createStore(reducer);

   

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

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

      const incrementAction = {

     type: 'INCREMENT',

     payload: 1

   };

   

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

Редюсеры — это функции, которые определяют, как состояние приложения изменяется в ответ на действия. Они принимают текущее состояние и действие, а возвращают новое состояние.

      const initialState = { count: 0 };



   function counterReducer(state = initialState, action) {

     switch (action.type) {

       case 'INCREMENT':

         return { ...state, count: state.count + action.payload };

       case 'DECREMENT':

         return { ...state, count: state.count - action.payload };

       default:

         return state;

     }

   }

   

4️⃣Диспетчеризация (Dispatch):

Для изменения состояния приложения необходимо отправить действие в хранилище с помощью метода dispatch.

store.dispatch(incrementAction);

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

Приложение может подписываться на изменения состояния в хранилище, чтобы обновлять интерфейс пользователя при изменении состояния.

      store.subscribe(() => {

     console.log(store.getState());

   });

   

Пример с React:



1️⃣Установка Redux и React-Redux:

npm install redux react-redux

2️⃣Создание хранилища и редюсера:

      // store.js

   import { createStore } from 'redux';



   const initialState = { count: 0 };



   function 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;

     }

   }



   const store = createStore(counterReducer);

   export default store;

   

3️⃣Подключение хранилища к 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')

   );

   

4️⃣Использование состояния и действий в компонентах:

      // App.js

   import React from 'react';

   import { useSelector, useDispatch } from 'react-redux';



   function App() {

     const count = useSelector(state => state.count);

     const dispatch = useDispatch();



     return (

       <div>

         <p>Count: {count}</p>

         <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>

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

       </div>

     );

   }



   export default App;

   

Redux — это библиотека для управления состоянием приложениях. Она использует хранилище для состояния, действия для описания изменений, редюсеры для обработки этих изменений и диспетчеризацию для применения действий.



👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти К списку 1429 вопроса на Frontend разработчика. Ставь 👍 если нравится контент



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