Список дел на React + Vite + Redux.

Для тех хочет понять как работает Redux.

Без TS для упрощения понимания.

Будет реализована функциональность добавления, удаления и отображения дел.
Стилизации нет, чтобы не отвлекать внимание от главного.

Шаг 1: Установка зависимостей

Начнем прямо с чистого листа - создаем новый проект React на Vite, т.к он работает быстрее чем webpack, и установливаем Redux и React-Redux:

npm init vite@latest

В процессе установки присваиваем имя проекту.

Выбираем React.

Далее выбираем Javascript + JWC.

cd vite-project // переходим в папку проекта

npm install // устанавливаем зависимости

npm i redux // устанавливаем redux

npm i react-redux устанавливаем react-redux

npm run dev // запускаем проект, чтобы убедиться, что все установлено и работает.

Шаг 2: Создание Redux хранилища

Создаем папку redux в корне проекта и добавляем следующие файлы:

1. actions.js — действия

// redux/actions.js

export const ADD_TODO = 'ADD_TODO';

export const REMOVE_TODO = 'REMOVE_TODO';

export const addTodo = (todo) => ({

type: ADD_TODO,

payload: todo,

});

export const removeTodo = (id) => ({

type: REMOVE_TODO,

payload: id,

});

2. reducers.js — редьюсер

// redux/reducers.js

import { ADD_TODO, REMOVE_TODO } from './actions';

const initialState = {

todos: [],

};

const todoReducer = (state = initialState, action) => {

switch (action.type) {

case ADD_TODO:

return {

...state,

todos: [...state.todos, action.payload],

};

case REMOVE_TODO:

return {

...state,

todos: state.todos.filter((todo) => todo.id !== action.payload),

};

default:

return state;

}

};

export default todoReducer;

3. store.js

// redux/store.js

import { createStore } from 'redux';

import todoReducer from './reducers';

const store = createStore(todoReducer);

export default store;

Шаг 3: Создание компонентов

Теперь создадим компоненты для отображения списка дел и формы для добавления новых дел.

1. TodoList.js — список дел

// src/TodoList.jsx

import React from 'react';

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

import { removeTodo } from './redux/actions';

const TodoList = () => {

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

const dispatch = useDispatch();

return (

<ul>

{todos.map((todo) => (

{todo.text}

<button onClick={() => dispatch(removeTodo(todo.id))}>Удалить</button>

</li>

))}

</ul>

);

};

export default TodoList;

2. TodoForm.js — форма для добавления дела

// src/TodoForm.jsx

import React, { useState } from 'react';

import { useDispatch } from 'react-redux';

import { addTodo } from './redux/actions';

const TodoForm = () => {

const [text, setText] = useState('');

const dispatch = useDispatch();

const handleSubmit = (e) => {

e.preventDefault();

if (text.trim()) {

dispatch(addTodo({ id: Date.now(), text }));

setText('');

}

};

return (

<input

type="text"

value={text}

onChange={(e) => setText(e.target.value)}

placeholder="Введите дело"

<button type="submit">Добавить</button>

</form>

);

};

export default TodoForm;

Шаг 4: Объединение компонентов в App.js

// src/App.jsx

import React from 'react';

import { Provider } from 'react-redux';

import store from './redux/store';

import TodoList from './TodoList';

import TodoForm from './TodoForm';

const App = () => {

return (

<div>

<h1>Список дел</h1>

</div>

</Provider>

);

};

export default App;

Шаг 5: Запуск приложения

Теперь вы можете запустить приложение:

npm run dev

Результат

После запуска приложения вы увидите форму для добавления дел и список уже добавленных дел. Вы сможете добавлять новые дела и удалять их из списка.

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