Redux Зберігайте мозок вашої програми

Найкращий спосіб створити додаток Redux

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

Для тих, хто раніше не використовував Redux, я наводжу з документів:

Redux - це передбачуваний контейнер стану для додатків JavaScript.

Це лише бібліотека потужністю 2 кб, яка вирішує одну з найбільших проблем у підтримці великих програм JavaScript: управління державою.

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

Скажімо, ми створюємо додаток для електронної комерції, де він містить основні сторінки, такі як каталог, деталі продукту та успіх платежів.

Нижче наведено провідні кадри того, як буде виглядати додаток:

Сторінка каталогуСторінка продуктуУспіх платежу

Таким чином, архітектура в Redux означає, що ми мусимо візуалізувати додаток як одну сутність, і кожна сторінка є суб-сутністю.

Існує чотири етапи створення програми Redux:

  1. Візуалізуйте дерево стану
  2. Створіть свої редуктори
  3. Реалізація дій
  4. Реалізація презентації

Крок 1: Візуалізуйте дерево стану

Із дротяних фреймів вище, створимо наше державне дерево.

Дерево стану програми

Це найважливіший крок. Після того, як ми зробимо візуалізацію свого державного дерева, реалізація методів Redux стає дуже просто! Пунктирні кола - це стани, які поділяться програмою, суцільні кола - це стани, що залежать від сторінки.

Крок 2. Створіть свої редуктори

Якщо вам цікаво, що саме таке редуктор, я цитую прямо з документів:

Редуктори задають, як змінюється стан програми у відповідь на дії, надіслані в магазин. Пам'ятайте, що дії описують лише те, що сталося, але не описують, як змінюється стан програми.

Кожен із важливих станів може мати власні редуктори. Пізніше ми можемо об'єднати їх у одному кореневому редукторі, який з часом визначить сховище (єдине джерело правдивості програми). Ось звідки надходить реальна влада: ви маєте тотальний контроль над своїми державами та їх поведінкою. У магазині нічого не виходить непогашеним. Мовчазний спостерігач постійно стежить.

У магазині стежать годинники

Давайте розглянемо приклад того, як створити редуктор за допомогою дерева стану програми, яке ми розробили вище.

// Кореневий редуктор
const rootReducer = combReducer ({
  заголовок: headerReducer,
  вхід: loginReducer,
  footer: footerReducer,
  поширений: commonReducer,
  продукт: productReducer,
  каталог: каталогРедуктор,
  оплата: PaymentReducer
});

Кореневий редуктор каже все це. Він містить все, що магазин повинен знати про додаток.

Тепер давайте розглянемо, як виглядає заголовок підрозділу.

Пригадайте, як ми розробили наш стан заголовка?

Дерево стану заголовка
// Заголовок редуктора
const headerReducer = combReducer ({
  меню: menuReducer,
  пошук: searchReducer,
  розташування: locationReducer
});

Наш редуктор - це копія того, що ми розробили раніше на нашому дереві. Це сила візуалізації.

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

Тепер давайте розберемося, як слід налаштувати типовий файл-редуктор, наприклад searchReducer.

// Редуктор пошуку
const початковаState = {
  корисне навантаження: [],
  isLoading: false,
  помилка: {}
}
функція експорту searchReducer (стан = початкова держава, дія) {
  перемикач (action.type) {
    випадок FETCH_SEARCH_DATA:
      повернути {
        ... держава,
        isLoading: вірно
    };
    
    випадок FETCH_SEARCH_SUCCESS:
      повернути {
        ... держава,
        корисне навантаження: action.payload,
        isLoading: false
      };
    
    випадок FETCH_SEARCH_FAILURE:
      повернути {
        ... держава,
        помилка: action.error,
        isLoading: false
      };
    випадок RESET_SEARCH_DATA:
      повернути {... стан, ... початковий стан}
    за замовчуванням:
      стан повернення;
  }
}

Ця модель редуктора визначає можливі зміни в його пошуковому стані при виклику API пошуку.

FETCH_SEARCH_DATA, FETCH_SEARCH_SUCCESS, FETCH_SEARCH_FAILURE, RESET_SEARCH_DATA

Все вищесказане - це можливі константи, які визначають, які можливі дії можна виконати.

Примітка. Важливо підтримувати дію RESET_SEARCH_DATA, якщо нам потрібно скинути дані під час демонтажу компонента.

Крок 3: Виконайте дії

Кожна дія, яка має виклики API, зазвичай проходить три етапи в додатку.

  1. Стан завантаження -> FETCH_SEARCH_DATA
  2. Успіх -> FETCH_SEARCH_SUCCESS
  3. Збій -> FETCH_SEARCH_FAILURE

Збереження цих типів дій допомагає нам перевірити потік даних, коли в нашому додатку викликається API.

Давайте зануримось у код, щоб зрозуміти, як виглядатиме типова дія.

функція експорту fetchSearchData (args) {
  повернути асинхронізацію (відправлення) => {
    // Ініціювати стан завантаження
    відправлення ({
      тип: FETCH_SEARCH_DATA
    });
    спробуйте {
      // Виклик API
      const result = очікувати fetchSearchData (args.pageCount, args.itemsPerPage);
      
     // Оновлення корисного навантаження в редукторі на успіх
     відправлення ({
        тип: FETCH_SEARCH_SUCCESS,
        корисне навантаження: результат,
        currentPage: args.pageCount
      });
    } улов (помилка) {
     // Оновлення помилки в редукторі при відмові
     відправлення ({
        тип: FETCH_SEARCH_FAILURE,
        помилка: помилка
      });
    }
  };
}

Зауважте, як відстежується потік даних магазином через дії. Це спричиняє відповідальність за кожну зміну програми.

Таким чином, подібні дії записуються для кожної зміни редукторів різних станів.

Однією з найбільших переваг Redux є абстрагування кожної дії.

Потік даних у додатку Redux

Крок 4: Виконайте презентацію

import React, {Component} з 'реагувати';
import {connect} з "react-redux"
імпортувати fetchSearchData з './action/fetchSearchData';
імпортувати SearchData з './SearchData';
const Пошук = (реквізит) => (
  
);
const mapStateToProps = (стан) => ({
  пошук: state.header.search.payload
});
const mapDispatchToProps = {
  fetchSearchData
};
експорт за замовчуванням підключення (mapStateToProps, mapDispatchToProps) (Пошук)

Як бачите, презентаційний компонент дуже простий і зрозумілий.

Висновок

Я хотів би зазначити деякі найбільші переваги, які я виявив за допомогою Redux:

  1. Це, безумовно, зменшує кодовий запах.
  2. Абстрагування коду простіше досягти.
  3. Redux також знайомить нас з іншими принципами, такими як незмінність, функціональне програмування та багато інших.
  4. Це дозволяє візуалізувати кожну дію та відстежувати їх за допомогою "подорожі в часі".

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

Слідкуйте за мною на Twitter, щоб отримати більше оновлень щодо нових статей та бути в курсі останніх розробок фронту. Також поділіться цією статтею на Twitter, щоб допомогти іншим знати про це. Спільний доступ - це дбайливий ^ _ ^.

Пам'ятайте, що ви можете плескати до 50 разів, щоб показати свою любов!

Деякі корисні ресурси

  1. https://redux.js.org/
  2. https://github.com/reduxjs/redux/blob/master/examples
  3. https://medium.com/@rajaraodv/a-guide-for-building-a-react-redux-crud-app-7fe0b8943d0f#.c4yhhvk0d

Мої попередні статті

  1. https://medium.freecodecamp.org/how-to-use-redux-persist-when-migrating-your-states-a5dee16b5ead
  2. https://codeburst.io/redux-observable-to-the-rescue-b27f07406cf2
  3. https://codeburst.io/building-webapp-for-the-future-68d69054cbbd
  4. https://codeburst.io/cors-story-of-requesting-twice-85219da7172d