javascript - Är det korrekt eller god praxis att använda SWR tillsammans med Redux?

Jag använder SWR

I min kod använder jag föreningen av båda enligt följande

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 det utdrag ovan ställer jag in mitt komponenttillstånd i redux med de data som jag returnerar med hjälp av SWR (integrerat med axios). På det sättet, i vilken annan komponent som helst som behöver använda samma data, importerar jag det bara med redux's useSelect.

Den här vägen

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

Jag tycker det är mer praktiskt än att bara använda SWR genom att kalla på useFetch i varje komponent som vill använda den datan.

Min fråga är: Är det här sättet korrekt, eller kan det påverka prestanda eller något annat?

Tack på förhand

Svar #1

Jag tycker att det är lite överflödigt, du skulle göra bättre i att använda det ena eller det andra. SWR är avsedd att använda cachen som ett lokalt tillstånd, eftersom det tillståndet finns på servern är det mer lämpligt och befriar dig från att hantera varje manipulation i tillståndet detaljerat, som du måste göra med Redux genom att explicit kalla API-anrop varje gång du skickar en åtgärd.

Att använda båda typerna besegrar syftet med SWR, du kommer ha det bättre genom att bara använda Redux då. En bra regel att följa är att använda SWR för att hantera tillståndet som finns på servern, och Redux för att hantera det lokala tillståndet.

Något scenario där jag kan se båda samexistera är när du har en väldigt komplex datamanipulering, och du måste ändra och radera information för ofta, jag tror att det fallet kommer att använda en blandning av redux och mutera-funktionen i SWR.

Svar #2

Du kan använda swr med redux och det är inte överflödigt. För det finns två typer av tillstånd. UI-tillstånd och Server-caching-tillstånd. Ett exempel på ett UI-tillstånd är om modalen är på eller av. Server-caching-tillstånd innebär att vi anropar API, lagrar resultatet och cachar det resultatet för användning på klientsidan. swr hanterar Server-caching-tillståndet.

I de tidiga dagarna av redux fanns det ingen caching. Sedan dök vissa bibliotek upp, i next.js swr, i react react-query bibliotek. Redux-toolkit har sin egen api-cachingimplementering.

Jag tror att med React-16 fick vi context API. React context i sig är inte ett verktyg för tillståndshantering. Det är bara ett sätt att överföra data. Det blir ett verktyg för tillståndshantering om du använder det med useState eller useReducer. Genom att kombinera React Context med dina egna hooks kan du ersätta redux. Och i dina hook-funktioner bör du använda swr. Jag förklarade här hur man kombinerar react-context, hooks och swr för att skapa ett fullständigt verktyg för tillståndshantering: Global state managment och Next.js

Relaterade artiklar