Головна » Розробка » Rematch - Redux без шаблонного коду

Rematch – Redux без шаблонного коду

rematch У цій статті я пропоную вам ознайомитись з основними перевагами Rematch та покажу, як просто та ефективно використовувати його для керування станом ваших додатків. Думаю, що, незалежно від вашого досвіду у розробці, ви знайдете корисну інформацію, яка допоможе вам у повсякденній роботі.

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

За допомогою Rematch ви можете визначити моделі (models) та їх стан, ефекти (effects) та ред’юсери (reducers). Він пропонує зручні інструменти для роботи з асинхронними операціями, а також можливість створення селекторів (selectors) для вибірки даних зі сховища. Все це допомагає організувати логіку вашої програми та керувати її станом з мінімальними зусиллями.

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

Введення в Rematch

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

Rematch — це інструмент для управління станом, а й філософія розробки. Він ставить собі завдання зробити код більш зрозумілим, легко підтримуваним і масштабованим. Однією з ключових особливостей Rematch є його інтеграція з Redux без необхідності писати численні бойлерплейт-коди та налаштування. Це дозволяє розробникам швидше почати ним користуватися та зосередитися на бізнес-логіці своєї програми.

У процесі роботи з бібліотекою я наголосив на наступних її корисних рисах:

  • невеликий обсяг (менше 2Кб);
  • відсутність необхідності зміни;
  • вбудована підтримка сайд-ефектів;
  • підтримка Redux Devtools, TypeScript;
  • підтримка динамічного додавання ред’юсерів, гарячого перезавантаження;
  • можливість створення кількох сховищ;
  • розширюваність функціоналу за допомогою плагінів;
  • можливість використання у React Native.

Якщо порівнювати Rematch із прямим використанням Redux, його основні переваги:

  • Простота та зрозумілий синтаксис . Rematch пропонує просту та інтуїтивно зрозумілу модель, яка дозволяє визначити моделі стану, ефекти та редьюсери з мінімальною кількістю коду. Він звільняє розробників від необхідності писати численні дії (actions), константи та редьюсери, що робить код лаконічнішим і зрозумілішим.
  • Модульність і перевикористовуваність . Rematch дозволяє організовувати код вашої програми у модулі (моделі), що сприяє логічному поділу функціональності та повторному використанню коду. Ви можете створювати незалежні моделі, що містять свій стан, ред’юсери та ефекти, та комбінувати їх в одне сховище.
  • Потужні ефекти . Rematch надає простий спосіб визначення та обробки асинхронних операцій та сайд-ефектів за допомогою ефектів. Він інтегрується з middleware Redux, що дозволяє легко керувати асинхронними запитами, зверненнями до API та іншими ефектами сайду.
  • Розширюваність . Rematch дозволяє легко розширювати функціональність за допомогою плагінів. Ви можете використовувати готові плагіни або створити свої власні, щоб додати нові можливості та інтеграції у свою програму.

Незважаючи на представлені плюси, важливо розуміти, що Rematch – це лише обгортка над Redux, яка надає розробникам спрощене API. Проблеми продуктивності та додаткового функціоналу, на жаль, не вирішить перехід від використання Redux до Rematch.

Основні концепції Rematch

Тут я покажу основні концепції Rematch, які допоможуть вам організувати та керувати станом вашої програми.

Моделі (Models)

Моделі є ключовим поняттям у Rematch. Вони є незалежними блоками коду, що містять стан, ред’юсери та ефекти. Кожна модель має унікальне ім’я і може бути поєднана з іншими моделями в одне сховище (store).

Давайте створимо просту модель “counter”, яка міститиме стан лічильника та редьюсери для його збільшення та зменшення, а також ефект для асинхронного збільшення:

/* ./models/count.ts */

import { createModel } from "@rematch/core";
import { RootModel } from ".";

export const count = createModel<RootModel>()({
  state: 0, // початковий стан
  reducers: {
    increment(state, payload: number) {
      return state + payload;
    },
    decrement(state, payload: number) {
      return state - payload;
    },
  },
  effects: (dispatch) => ({
    async incrementAsync(payload: number, state) {
      await new Promise((resolve) => setTimeout(resolve, 1000));
      dispatch.count.increment(payload);
    },
});

export default counter;
import { Models } from "@rematch/core";
import { count } from "./count";
import { example } from "./example";

export interface RootModel extends Models<RootModel> {
  count: typeof count;
  example: typeof example;
}

export const models: RootModel = { count, example };

Сховище (Store)

Сховище є об’єднання декількох моделей в одну структуру даних. Воно є єдиним джерелом правди для вашої програми та зберігає стан усіх моделей.

Для створення сховища Rematch використовує функцію init, яка приймає об’єкт із моделями:

import { init, RematchDispatch, RematchRootState } from "@rematch/core";
import { models, RootModel } from "./models";

export const store = init({
  models,
});

export type Store = typeof store;
export type Dispatch = RematchDispatch<RootModel>;
export type RootState = RematchRootState<RootModel>;

Диспатч екшенів (Dispatch actions)

За допомогою диспатча ви можете викликати редьюсери та ефекти ваших моделей. Диспатч можна викликати звичним способом, як у Redux, або коротким записом:

const { dispatch } = store;

dispatch({ type: "count/increment", payload: 1 });
dispatch.count.increment(1);

dispatch({ type: "count/incrementAsync", payload: 1 });
dispatch.count.incrementAsync(1);

Доступ до стану та дій

Щоб отримати доступ до стану та дій моделей у компонентах вашої програми, ви можете використовувати хук useSelector та метод dispatch:

import * as React from "react";
import { useSelector, useDispatch } from 'react-redux';
import { RootState, Dispatch } from './store';

const CounterComponent = () => {
  const count = useSelector((state: RootState) => state.count);
  const dispatch = useDispatch<Dispatch>();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => dispatch.count.increment(1))}>Increment</button>
      <button onClick={() => dispatch.count.decrement(1))}>Decrement</button>
    </div>
  );
};

export default CounterComponent;

У цьому прикладі ми використовуємо хук useSelector для отримання значення стану “counter” зі сховища, а також метод dispatch для виклику відповідних редьюсерів.

Ефекти (Effects)

У Rematch ефекти надають можливість виконувати асинхронні операції, такі як запити до сервера чи обробка даних. Вони дозволяють вам легко керувати побічними ефектами у вашому додатку.

Для додавання ефектів у модель можна використовувати ключове слово effects і визначити потрібні методи. Давайте додамо ефект для завантаження даних із сервера:

const counter = createModel<RootModel>()({
  state: 0,
  reducers: {
    // ...
  },
  effects: {
    async fetchData(payload, rootState) {
      try {
        const response = await fetch(`http://example.com/${payload}`);
        const data = await response.json();
        // Дії з отриманими данными
      } catch (error) {
        // Обробка помилок
      }
    },
  },
});

Плагіни (Plugins)

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

Існує безліч плагінів, доступних для використання з Rematch. Деякі з них були написані безпосередньо командою авторів цієї бібліотеки, але є такі, які створювалися спільнотою, на npm/github, і ніхто не забороняє написати свій власний плагін.

Нижче ви знайдете короткий опис плагінів, створених командою Rematch:

  • @rematch/immer : Обертає ваші ред’юсери за допомогою бібліотеки immer, що дозволяє безпечно виконувати зміни стану за допомогою мутацій, зберігаючи при цьому незмінність стану.
  • @rematch/select : Додає можливість використовувати селектори (selectors) для вибору даних стану. Селектори створюються за допомогою бібліотеки reselect за замовчуванням і автоматично зв’язуються із залежностями селекторів з інших моделей.
  • @rematch/loading : Плагін для відображення індикаторів завантаження під час виконання ефектів. Допомагає уникнути ручного керування станом завантаження, додаючи автоматичну підтримку завантаження Rematch.
  • @rematch/updated : Плагін, що дозволяє підтримувати тимчасові мітки (timestamps) під час виклику ефектів. Він застосовується переважно для оптимізації ефектів і може використовуватися для запобігання виконання дорогих запитів протягом певного періоду часу або обмеження частоти виконання ефектів.
  • @rematch/persist : Надає автоматичну персистентність стану Redux. Це дозволяє зберігати стан між перезавантаженнями сторінки або після закриття та повторного відкриття програми.
  • @rematch/typed-state : призначений для перевірки типів стану під час виконання. Використовує proptypes для опису очікуваної форми типів.

Підсумок

У цій статті я розповів про Rematch – потужну бібліотеку для управління станом додатків. На підставі свого досвіду виділив основні переваги Rematch і на практиці показав, як легко та ефективно використовувати його для організації Redux-сховища та управління станом.

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

Завдяки підтримці безлічі плагінів, Rematch може бути легко розширений та адаптований під ваші конкретні потреби. Ми розглянули деякі популярні плагіни, такі як плагін для збереження стану за допомогою redux-persist, плагін для використання immer.js та плагін для створення селекторів за допомогою reselect.

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

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

Джерело