🚀 Веб-разработка с нуля: Урок 25 — State-менеджмент с Redux Toolkit
Привет, React-разработчики! 👨💻👩💻
Сегодня выведем управление состоянием на профессиональный уровень — внедрим Redux Toolkit в наше To-Do приложение!
### 🔥 Зачем Redux Toolkit?
- Упрощенная настройка хранилища
- Встроенная иммутабельность
- DevTools для отладки
- Оптимизированные перерисовки
### 🛠 Настройка за 4 шага
1️⃣ Устанавливаем зависимости:
npm install @reduxjs/toolkit react-redux
2️⃣ Создаем слайс задач (features/tasks/tasksSlice.ts):
import { createSlice, PayloadAction } from '@reduxjs/toolkit';
interface Task {
id: string;
text: string;
completed: boolean;
}
const initialState: Task[] = [];
export const tasksSlice = createSlice({
name: 'tasks',
initialState,
reducers: {
addTask: (state, action: PayloadAction<string>) => {
state.push({
id: Date.now().toString(),
text: action.payload,
completed: false
});
},
toggleTask: (state, action: PayloadAction<string>) => {
const task = state.find(t => t.id === action.payload);
if (task) task.completed = !task.completed;
}
}
});
export const { addTask, toggleTask } = tasksSlice.actions;
export default tasksSlice.reducer;
3️⃣ Настраиваем хранилище (app/store.ts):
import { configureStore } from '@reduxjs/toolkit';
import tasksReducer from '../features/tasks/tasksSlice';
export const store = configureStore({
reducer: {
tasks: tasksReducer
}
});
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;
4️⃣ Подключаем к React (main.tsx):
import { Provider } from 'react-redux';
import { store } from './app/store';
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
### 💡 Используем в компонентах
import { useAppDispatch, useAppSelector } from '../app/hooks';
import { addTask, toggleTask } from './tasksSlice';
export const TaskList = () => {
const tasks = useAppSelector(state => state.tasks);
const dispatch = useAppDispatch();
const handleAdd = (text: string) => dispatch(addTask(text));
const handleToggle = (id: string) => dispatch(toggleTask(id));
return (
/* JSX с использованием tasks и handlers */
);
};
### 🚀 Что это даёт?
- Централизованное управление состоянием
- Предсказуемость изменений
- Лёгкую масштабируемость
- Возможность time-travel дебаггинга
### 📌 Практическое задание
1. Реализуйте удаление задач
2. Добавьте фильтрацию (все/активные/выполненные)
3. Подключите сохранение в localStorage
👉 В следующем уроке:
Асинхронные действия с Redux Thunk!
💬 Какие state-менеджеры пробовали до этого?
Подписывайтесь: [https://dzen.ru/id/5e6014a22273ad143e3932b5](https://t.me/rm_programmer)
#Redux #React #TypeScript #ВебРазработка
