Jak správně zabezpečit API pomocí JWT tokenů > 공지사항

• 목록
• 답변
• 글쓰기
• 게시판 리스트 옵션
  • 수정
  • 삭제

Na závěr: stav reduxujte, ne komplikujte. Držte se principu, že stav by měl být co nejblíže datům, která skutečně potřebujete. Nepřidávejte zbytečné metadatové položky, které nikdo nepoužívá. Pravidelně si procházejte svůj stav a ptejte se, zda každý klíč má opodstatnění. Pokud ne, smažte ho. Tento přístup zjednoduší ladění i údržbu a vy se budete moci soustředit na funkcionalitu.

Při práci s asynchronními akcemi se vyvarujte ukládání celých odpovědí z API přímo do stavu bez transformace. Například pokud API vrací nestrukturovaný objekt, normalizujte ho do tvaru, který odpovídá vašim potřebám. Tím zabráníte tomu, aby se do stavu dostaly nepotřebné nebo citlivé údaje, a zároveň zjednodušíte práci s daty v komponentách. Uložte si do stavu pouze to, co skutečně potřebujete.

RUN npm install

Jeden zdroj pravdy pro každý požadavek Klíčem je redukovat počet stavových proměnných. Pokud máte tři různé endpointy, nepotřebujete tři samostatné objekty s loading a error. If you enjoyed this information and you would certainly such as to get additional info relating to Rady pro Rekonstrukci kindly browse through the web page. Vytvořte si generický slice, který přijímá typ akce a ukládá data do mapy. Například stav ve tvaru byId: {}, loadingIds: [], errorIds: [] umožňuje sledovat, které položky se načítají, které selhaly a které už mají data. Tím se vyhnete duplicitnímu kódu a usnadníte si testování.

Jak na to: reducery a helper funkce Vytvořte si pomocné funkce (tzv. helpery) pro reducery, které vám ušetří opakující se kód. Například funkce `startLoading(state)` nastaví `status` na 'loading' a vymaže předchozí chybu. Funkce `setSuccess(state, payload)` nastaví `status` na 'success' a uloží data. Funkce `setError(state, error)` nastaví `status` na 'error' a uloží chybu. Tyto helpery pak voláte v každém reduceru pro asynchronní akce, což výrazně zkrátí kód a zpřehlední logiku.

Práce s asynchronními akcemi v Reduxu často vede k zahlcení stavu zbytečnými metadaty. Typický problém? Každý request si nese vlastní vlajky loading, error a data. Když jich máte v aplikaci deset, stav se stává nepřehledným a údržba peklem. Místo abyste pro každou akci vytvářeli nový slice, zkuste stav navrhnout jako jednu strukturu, která reprezentuje aktuální fázi požadavku. Například místo tří booleanů použijte jediný stavový automat: idle, loading, success, error.

Nakonec se vyplatí vytvořit si vlastní hook (např. `useAsync`), který zapouzdří logiku pro načítání dat. Tento hook může přijímat async funkci a vracet data, status a error. Uvnitř hooku pak používáte dispatch a selektory, ale komponenty zůstávají čisté. Tím dosáhnete toho, že se asynchronní logika vyskytuje na jednom místě a komponenty se starají pouze o zobrazení. Tím se výrazně zjednoduší údržba a testování.

Práce s asynchronními akcemi v Reduxu často vede k nepřehlednému stavu, kde se mísí data, načítání a chyby. Typickým problémem je, že každá akce má vlastní flag pro loading, error a samotná data. Výsledkem je duplicitní logika a složitá údržba. Řešením je sjednotit strukturu stavu tak, aby každý typ asynchronní operace měl jeden konzistentní tvar, který se dá snadno testovat a znovu použít.

Při přidávání nové funkce si položte otázku: co se stane, když tato funkce selže? Pokud je odpověď „rozpadne se celý platební proces", potřebujete integrační test. Pokud je to „načte se špatně seznam položek", stačí unit test na logiku řazení a filtrování. Častým omylem je testovat na úrovni integrace i to, co je čistě byznys logika, a naopak – psát unit testy na triviální gettery. To vede k tomu, že testy jsou křehké a každá změna designu znamená přepisování stovek řádků.

Dalším krokem je použití `createAsyncThunk` z Redux Toolkit, pokud to osvětlení v obývákuáš projekt umožňuje. Tento nástroj automaticky generuje akce pro pending, fulfilled a rejected stavy a vy nemusíte psát ručně akce ani reducery. Stačí definovat async funkci, která vrací data, a Toolkit se postará o zbytek. Tím se vyhnete chybám a zjednodušíte si práci. Pokud Toolkit nepoužíváte, vytvořte si vlastní middleware, ale princip zůstává stejný.

Dalším častým problémem je nekonzistence mezi akcemi. Pokud máte tři různé akce pro načtení uživatele (REQUEST, SUCCESS, FAILURE), musíte ošetřit každou zvlášť. Místo toho použijte jeden reducer, který reaguje na typ akce a na základě přípony (_PENDING, _FULFILLED, _REJECTED) aktualizuje stav. Tím se vyhnete opakování logiky a snížíte riziko chyby. Například pomocí knihovny redux-thunk nebo redux-saga můžete vytvořit univerzální helper, který automaticky generuje typy akcí a přidává je do stavu.

Další past je přílišná komplikovanost stavu kvůli cachování. Není nutné ukládat časové razítko pro každý požadavek. Pokud potřebujete invalidovat data, použijte jednoduchý čítač verze nebo globální příznak. Můžete také využít middleware, který automaticky zruší staré požadavky, když přijde nový. Tím se vyhnete závodním podmínkám a stav zůstane čistý.