javascript - Er det korrekt eller god praksis at bruge SWR sammen med Redux?

Jeg bruger SWR

I min kode bruger jeg krydset af begge som følger

const vehiclesStates = useSelector(({ vehiclesStates: state }) => state); // REDUX
const response = useFetch("/vehicles/states") // SWR
const dispatch = useDispatch(); // REDUX

// REDUX
useEffect(() => {
  if(response.data) dispatch(VehiclesStatesActions.setVehiclesStates(response.data.result))
}, [response.data, dispatch]);

if(response.error) return <div>ERROR - {response.error.toString()}</div> // SWR
else if(!response.data) return <div>LOADING</div> // SWR

// If there is a return I render my component
return (<></>)

I dette uddrag ovenfor sætter jeg min komponenttilstand i redux med de data, som jeg returnerer ved hjælp af SWR (integreret med axios). På den måde, i enhver anden komponent, der har brug for at bruge de samme data, importerer jeg det kun med redux's useSelect.

Denne vej

const vehiclesStates = useSelector(({ vehiclesStates: state }) => state);

Jeg finder det mere praktisk end blot at bruge SWR ved at kalde useFetch på hver komponent, der ønsker at bruge de data.

Mit spørgsmål er: Er det korrekt at bruge denne metode, eller kan det påvirke ydeevnen eller noget?

Tak på forhånd

Svar #1

Jeg synes, det er en smule redundante, du kunne bedre bruge den ene eller den anden, SWR er beregnet til at bruge cachen som en lokal tilstand, fordi den tilstand lever på serveren, er det mere passende og frigør dig fra at skulle håndtere hver manipulation i tilstanden detaljeret, som du skal gøre med redux ved eksplicit at kalde API-opkald hver gang du sender en handling.

At bruge begge slags underminerer formålet med SWR, så det er bedre bare at bruge Redux. En god regel at følge er at bruge SWR til at håndtere den tilstand, der findes på serveren, og Redux til at håndtere den lokale tilstand.

Et scenario, hvor jeg kan se begge eksistere, er, når du har en meget kompleks datamanipulation, og du skal ændre og slette information for ofte, jeg tror, at den sag vil bruge en blanding af redux og mutate-funktionen i SWR.

Svar #2

Du kan bruge swr med redux, og det er ikke redundant. Fordi der er 2 typer tilstande. UI-tilstand og Server-caching-tilstand. Et eksempel på en UI-tilstand er, om modalvinduet er tændt eller slukket. Server-caching-tilstand er, når vi kalder API, gemmer resultatet og cacher dette resultat til brug på klientsiden. swr håndterer Server-caching-tilstanden.

I de tidlige dage af redux var der ingen caching. Så opstod nogle biblioteker, i next.js swr, i react react-query biblioteker. Redux-toolkit har sin egen api caching-implementering.

Jeg tror, at med React-16 fik vi context API. React context i sig selv er ikke et værktøj til tilstandsstyring. Det er bare et middel til at overføre data. Det bliver et værktøj til tilstandsstyring, hvis du bruger det med useState eller useReducer. Ved at kombinere React Context med dine egne hooks kan du erstatte redux. Og i dine hook-funktioner bør du bruge swr. Jeg forklarede her, hvordan man kombinerer react-context, hooks og swr for at skabe et fuldt værktøj til tilstandsstyring: Global state managment og Next.js

Relaterede artikler