Настройка Redux в React-приложении включает следующие шаги
Шаг 1: Установка зависимостей
Установите необходимые пакеты через npm или yarn:
npm install --save redux react-redux @reduxjs/toolkitили
yarn add redux react-redux @reduxjs/toolkitШаг 2: Создание хранилища Redux (store)
Создаем файл src/store.js:
import { configureStore } from '@reduxjs/toolkit';
// Создаем начальное состояние приложения
const initialState = {
counter: 0,
};
// Редьюсер — описывает изменения состояния
const reducer = (state = initialState, action) => {
switch (action.type) {
case 'INCREMENT':
return { ...state, counter: state.counter + 1 };
case 'DECREMENT':
return { ...state, counter: state.counter - 1 };
default:
return state;
}
};
// Настраиваем store
export const store = configureStore({
reducer,
});Шаг 3: Подключение хранилища к приложению
Оборачиваем наше приложение в компонент <Provider> из библиотеки react-redux, чтобы компоненты могли получать доступ к состоянию через useSelector.
Файл index.js:
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { Provider } from 'react-redux'; // Импортируем провайдер
import { store } from './store'; // Импортируем созданный ранее store
ReactDOM.createRoot(document.getElementById('root')).render(
<Provider store={store}>
<App />
</Provider>,
);Шаг 4: Использование состояний и действий внутри компонентов
Используем хук useDispatch() для отправки действий и useSelector() для чтения текущего состояния.
Пример компонента Counter.js:
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
const Counter = () => {
const count = useSelector((state) => state.counter); // Получаем значение счётчика
const dispatch = useDispatch(); // Функция для отправки действия
return (
<div>
<h1>Счётчик: {count}</h1>
<button onClick={() => dispatch({ type: 'INCREMENT' })}>+</button>
<button onClick={() => dispatch({ type: 'DECREMENT' })}>-</button>
</div>
);
};
export default Counter;Итоги:
Теперь ваше приложение настроено на использование Redux! Вот ключевые моменты:
- Redux Store хранит глобальное состояние приложения.
- Редьюсер обрабатывает действия и обновляет состояние.
- Компоненты используют хуки (
useSelectorиuseDispatch) для взаимодействия с состоянием и отправкой действий.
Это базовая настройка, которую можно расширять по мере усложнения проекта добавлением асинхронности, middleware и более сложных структур хранения данных.