Что такое 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 разработчика. Ставь 👍 если нравится контент

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