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

1. Настройка проекта:
   Для начала убедитесь, что на вашем компьютере установлены Node.js и npm (менеджер пакетов Node). Создайте новый проект React с помощью Create React App и установите необходимые зависимости:

npx create-react-app todo-list
cd todo-list
npm install react-redux

2. Создание хранилища Redux.
   Первым шагом при внедрении Redux является настройка хранилища. Создайте новый файл с именем store.js и добавьте следующий код:

import { createStore } from 'redux';
import rootReducer from './reducers';
const store = createStore(rootReducer);
export default store;

3. Определение действий и редукторов.
   Далее давайте определим действия и редукторы для нашего списка задач. Создайте новую папку с именем action и добавьте файл todoActions.js:

export const addTodo = (text) => {
  return {
    type: 'ADD_TODO',
    payload: {
      text,
    },
  };
};
export const deleteTodo = (id) => {
  return {
    type: 'DELETE_TODO',
    payload: {
      id,
    },
  };
};

Создайте еще одну папку с именем редукторы и добавьте файл с именем todoReducer.js:

const initialState = [];
const todoReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return [...state, { id: Date.now(), text: action.payload.text }];
    case 'DELETE_TODO':
      return state.filter((todo) => todo.id !== action.payload.id);
    default:
      return state;
  }
};
export default todoReducer;

4. Подключение Redux к React:
   Чтобы подключить Redux к React, оберните свое приложение компонентом Provider из act-redux в файле index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import App from './App';
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

5. Диспетчеризация действий.
   Теперь давайте отправим действия из наших компонентов React. Импортируйте хук useDispatch из act-redux и создателей необходимых действий из todoActions.js:

import React, { useState } from 'react';
import { useDispatch } from 'react-redux';
import { addTodo, deleteTodo } from './actions/todoActions';
const TodoList = () => {
  const [todoText, setTodoText] = useState('');
  const dispatch = useDispatch();
  const handleAddTodo = () => {
    dispatch(addTodo(todoText));
    setTodoText('');
  };
  const handleDeleteTodo = (id) => {
    dispatch(deleteTodo(id));
  };
  return (
    <div>
      <input
        type="text"
        value={todoText}
        onChange={(e) => setTodoText(e.target.value)}
      />
      <button onClick={handleAddTodo}>Add Todo</button>
      <ul>
        {/* Render the todo list */}
      </ul>
    </div>
  );
};
export default TodoList;

6. Отображение списка дел:
   Чтобы отобразить список дел, импортируйте хук useSelector из реакции-редукса и измените компонент TodoList:

import React from 'react';
import { useSelector } from 'react-redux';
const TodoList = () => {
  const todos = useSelector((state) => state);
  return (
    <div>
      {/* Input and button code omitted for brevity */}
      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>
            {todo.text}
            <button onClick={() => handleDeleteTodo(todo.id)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
};
export default TodoList;

Поздравляем! Вы узнали, как создать приложение списка дел с помощью React и Redux. Мы рассмотрели процесс установки, создание действий и редукторов, подключение Redux к React и отправку действий из компонентов. Применяя эти методы, вы можете создавать более сложные функции, такие как редактирование задач, пометка их как завершенных или фильтрация их по статусу. Приятного кодирования!