Основи Redux, частина 3 Стан, дії та редуктори

Що ви дізнаєтесь

  • Як визначити значення стану, які містять дані вашого додатка
  • Як визначити об’єкти дій, які описують, що відбувається у вашому додатку
  • Як писати функції редуктора, які обчислюють оновлений стан на основі існуючого стану та дій
  • Знайомство з ключовими термінами та поняттями Redux, такими як "дії", "редуктори", "зберігання" та "відправлення". (Побачити Частина 2: Концепції Redux та потік даних для пояснень цих термінів.)

Вступ #

У частині 2: Концепції Redux та потік даних ми розглянули, як Redux може допомогти нам створювати сервісні програми, надаючи нам єдине центральне місце для глобального стану додатків. Ми також говорили про основні концепції Redux, такі як диспетчеризація об'єктів дій та використання функцій редуктора, які повертають нові значення стану.

Тепер, коли ви трохи уявляєте, що це за штуки, настав час застосувати ці знання на практиці. Ми збираємося створити невеликий приклад програми, щоб побачити, як ці твори насправді працюють разом.

Приклад програми не призначений як повний готовий до виробництва проект. Мета полягає в тому, щоб допомогти вам вивчити основні API Redux та схеми використання, і спрямувати вас у правильному напрямку, використовуючи деякі обмежені приклади. Крім того, деякі з попередніх творів, які ми будуємо, буде оновлено пізніше, щоб показати кращі способи зробити щось. Будь ласка, прочитайте весь підручник, щоб побачити всі використовувані концепції.

Налаштування проекту #

Для цього підручника ми створили заздалегідь налаштований початковий проект, у якому вже налаштовано React, який включає деякий стиль за замовчуванням і має підроблений REST API, що дозволить нам писати фактичні запити API у нашому додатку. Ви будете використовувати це як основу для написання власне коду програми.

Для початку ви можете відкрити та розгалужити цей CodeSandbox:

Ви також можете клонувати той самий проект із цього репозиторію Github. Після клонування репо, ви можете встановити інструменти для проекту за допомогою npm install і запустити його з npm start .

Якщо ви хочете побачити остаточну версію того, що ми збираємося створити, ви можете перевірити гілка підручників, або подивіться на остаточну версію в цьому CodeSandbox.

Створення нового проекту Redux + React #

Закінчивши цей підручник, ви, мабуть, захочете спробувати працювати над власними проектами. Ми рекомендуємо використовувати шаблони Redux для Create-React-App як найшвидший спосіб створити новий проект Redux + React. Він поставляється з уже налаштованими Redux Toolkit та React-Redux, використовуючи модернізовану версію прикладу програми "counter", який ви бачили в Частині 1. Це дозволяє перейти безпосередньо до написання власного коду програми, не додаючи пакунків Redux та не налаштовуючи магазин.

Якщо ви хочете знати конкретні подробиці про те, як додати Redux до проекту, див. Це пояснення:

Детальне пояснення: Додавання Redux до проекту React

Шаблон Redux для CRA поставляється з уже налаштованими Redux Toolkit та React-Redux. Якщо ви створюєте новий проект з нуля без цього шаблону, виконайте такі дії:

  • Додайте пакети @ reduxjs/toolkit та response-redux
  • Створіть магазин Redux, використовуючи RTK's configureStore API, і передайте принаймні одну функцію редуктора
  • Імпортуйте сховище Redux у файл точки входу програми (наприклад, src/index.js)
  • Оберніть ваш кореневий компонент React файлом

компонент від React-Redux, наприклад:

Вивчення початкового проекту №

Цей початковий проект базується на стандартному шаблоні проекту Create-React-App з деякими змінами.

Давайте швидко розглянемо, що містить початковий проект:

Якщо ви завантажуєте програму зараз, ви побачите привітальне повідомлення, але інша частина програми порожня.

З цим давайте почнемо!

Запуск програми Todo Example #

Нашим прикладом програми буде невеликий додаток. Ви, напевно, вже бачили приклади додатків todo - вони роблять хороші приклади, тому що вони дозволяють нам показати, як робити такі речі, як відстеження списку елементів, обробка введення користувачем та оновлення інтерфейсу користувача, коли ці дані змінюються, і це все, що відбувається в звичайне застосування.

Визначення вимог №

Почнемо з того, що з’ясуємо початкові бізнес-вимоги до цієї програми:

  • Інтерфейс користувача повинен складатися з трьох основних розділів:
    • Поле введення, яке дозволяє користувачеві вводити текст нового завдання
    • Список усіх існуючих пунктів завдання
    • Розділ нижнього колонтитула, який показує кількість незавершених завдань та параметри фільтрації
  • Елементи списку Todo повинні мати прапорець, який перемикає їх статус "завершено". Ми також повинні мати можливість додавати кольоровий тег категорії для заздалегідь визначеного списку кольорів та видаляти всі завдання.
  • Лічильник повинен збільшувати кількість активних завдань: "0 елементів", "1 елемент", "3 елементи" тощо