Планувальник завдань

Розбиратимемо Redux на прикладі програми планувальника завдань, в якій можна створити, видалити, відзначити завдання як виконане і відфільтрувати задачі за статусом. Це дозволить нам розглянути стандартні випадки під час роботи з колекцією даних.

В першу чергу пропишемо базові вимоги до інтерфейсу та логіки роботи програми:

• Інтерфейс повинен складатися з кількох частин:
  • Шапка з інформацією про завдання та фільтри
  • Форма з полем введення для створення нових завдань
  • Список завдань
• У шапці необхідно відображати:
  • Кількість виконаних та невиконаних завдань
  • Фільтри списку завдань зі значеннями «All», «Active» та «Completed»
• У кожного елементу списку завдань має бути:
  • Абзац з текстом який вводив у форму користувач під час створення завдання
  • Чекбокс перемикання статусу «виконано»
  • Кнопка видалення завдання

Кінцева мета - додаток, інтерфейс якого виглядатиме так.

Проектування стану

Інтерфейс програми повинен ґрунтуватися на його стані. Тому в першу чергу необхідно спроектувати стан програми, яка міститиме найменшу кількість значень, достатню для опису всього необхідного функціоналу. Це скоротить кількість даних, за якими необхідно буде стежити та оновлювати.

У нашому додатку є дві основні частини: список завдань, з яких можна отримати всі необхідні дані про кількість та статус завдань, та значення фільтрів списку завдань. Це і буде мінімально необхідний стан.

const appState = {
  tasks: [],
  filters: {
    status: "all",
  },
};

Структура стану

Стан Redux це завжди об'єкт, всередину якого додаються властивості для стану програми. Тому ми оголосили властивість tasks для масиву всіх завдань та filters для можливих фільтрів. Стан Redux може бути настільки простий або складний, наскільки цього вимагає функціонал програми.

Кожне завдання буде представлено об'єктом з наступними властивостями:

• id - унікальний ідентифікатор
• text - текст, який ввів користувач під час створення
• completed - прапор, що вказує, виконано завдання чи ні

Ось як може виглядати приклад стану нашої програми з кількома завданнями:

const appState = {
  tasks: [
    { id: 0, text: "Learn HTML and CSS", completed: true },
    { id: 1, text: "Get good at JavaScript", completed: true },
    { id: 2, text: "Master React", completed: false },
    { id: 3, text: "Discover Redux", completed: false },
    { id: 4, text: "Build amazing apps", completed: false },
  ],
  filters: {
    status: "all",
  },
};

Проектування екшенів

Екшени це події, які можуть статися в додатку, в тому числі як реакція на дії користувача. Складемо список подій, які можуть бути в нашому додатку:

• Додати нове завдання з текстом, введеним користувачем
• Видалити завдання
• Переключити статус завдання
• Змінити значення фільтра статусу

Структура файлів проекту

У Redux немає стандарту структури файлів проекту, тільки загальні рекомендації та приклади, тому кожен може вибрати щось для себе. Тим не менш, важливо продумати шаблон структури файлів проекту ще до написання коду.

Для того, щоб відокремити логіку Redux від коду компонентів, нам буде достатньо зробити папку src/redux з кількома файлами. У невеликому додатку, як наш планувальник завдань, цього буде достатньо.

• actions.js - файл оголошення екшенів програми
• reducer.js - файл оголошення функцій-редюсерів для оновлення стану
• constants.js - файл для зберігання констант (наприклад значень фільтру статусу)
• selectors.js - файл оголошення функцій-селекторів
• store.js - файл створення стор Redux

Якщо в додатку багато різних даних, то підійде «feature based» підхід, де під кожну сутність створюється окрема папка усередині папки redux. Усередині кожної сутності є стандартний набір файлів. В результаті більше файлів, але код логіки Redux поділений на сутності та більш структурований.

Стартовий код

У цій пісочниці ви можете взяти стартовий код планувальника завдань з вже готовими компонентами React та доповнювати його логікою Redux паралельно вивченню матеріалу.