ReDucks

Zagłębiłem się ostatnio bardzo w tematykę Redux. Podczas czytania różnych artykułów natrafiłem na rodzaj architektury Redux nazwany Ducks. Cała idea Ducks wygląda bardzo prosto i pozwala trzymać powiązane elementy razem, zamiast dzielić części Redux zależnie do typu (akcje, reduktory, typy). Postanowiłem ją wytestować w projekcie.

Cała idea Ducks opiera się na trzymaniu reduktora razem z jego typami i kreatorami akcji w jednym pliku. Dzięki czemu unikamy wielu eksportów/importów i powiązane funkjonalności edytujemy w jednym miesjcu.

Mamy jednak parę zasad:

  • reduktor musi być eksportowany domyślnie
  • każda akcja musi być eksportowana
  • typy są zdefiniowane w tym samym pliku i mogą być eksportowane, jeśli są potrzebne w innych reduktorach

Z tymi zasadami przerobiłem swoje wszystkie reduktory w projekcie. Całość zajęła kilka minut i zaoszczędziłem kilka eksportów, zmniejszyłem liczbę plików oraz wszystkie funkcjonalności związane z reduktorem mogę szybciej edytować. Poniżej przykład reduktora zadań przerobiony na Ducks.

const ADD_TASK = "ADD_TASK";
const REMOVE_TASK = "REMOVE_TASK";

const taskReducer = (state = [], action) => {
  switch (action.type) {
    case ADD_TASK:
      return [action.payload, ...state];
    case REMOVE_TASK:
      return state.filter(element => element.name !== action.payload);
    default:
      return state;
  }
};

export default taskReducer;

export function addTask(task) {
  return {
    type: ADD_TASK,
    payload: task,
  };
}

export function removeTask(task) {
  return {
    type: REMOVE_TASK,
    payload: task,
  };
}

W przypadku potrzeby zmienienia akcji możemy zmienić reduktor i kreator akcji w jednym miejscu, bez potrzeby wyszukiwania odpowiednich plików. Do tego nie muszę już nigdzie eksportować typów i nie mam jednego folderu, który był tylko od trzymania pliku z listą typów. W przypadku większych reduktorów importowanie po każdym typie było straszne, a import grupowy dodawał dodatkowej składni. Dzięki tej architekturze zarządzanie Redux jest jeszcze prostsze.

Bardzo polecem ją przetestować i zobaczyć jak sprawdzi się w waszych projektach. Jeśli pliki staną się bardzo obszerne będzie to sygnał, że może reduktor ma za dużo odpowiedzialności i należy go odpowiednio rozbić na mniejsze składowe reduktory. Miłej zabawy z kaczuszkami.

Opublikowano: 08.05.2017