reactjs - Bør jeg sende useSelector til useState

Hei folkens, jeg har et spørsmål angående hvilken metode dere foretrekker:

I en React-funksjonell komponent med TypeScript, som henter verdier fra Redux State ved hjelp av useSelector, er: 1)

 const campaign = useSelector(campaignSelector);
 const [audienceSample, setAudienceSample] = useState<number | null>((campaign || 
  {max_completes_total: null})['max_completes_total']);

fra 2)

 const campaign = useSelector(campaignSelector);
  const [audienceSample, setAudienceSample] = useState<number | null>(null);
  useEffect(() => {
    setAudienceSample(campaign.max_completes_total)
     },[campaign])

Jeg vet at 1 er mindre kode, men tror du det er raskere, og hvilken ville du foretrekke, takk folkens

Svar #1

Den første er ugyldig. Og den er ugyldig fordi staten fra useState er vedvarende, og argumentet som settes i useState er standard verdi, noe som betyr - det vil bli satt bare når komponenten monteres for første gang. Så å endre Redux-staten og ny verdi gitt fra useSelector vil ikke påvirke den lokale staten, den vil hele tiden indikere den opprinnelige standardverdien.

For å svare på spørsmålet ditt - svaret handler ikke om hva jeg foretrekker, men hva som fungerer, den andre er bare den riktige. Det jeg derimot vil foreslå her som den beste løsningen fra et kodeperspektiv er å slå litt av begge sammen, for å unngå å sette null som standard og sette generiske typer i useState. Se på følgende kode:

const campaign = useSelector(campaignSelector);
const [audienceSample, setAudienceSample] = useState(campaign?.max_completes_total); // set campaign as default

useEffect(() => {
   setAudienceSample(campaign?.max_completes_total)
},[campaign]) // set the relation between redux campaign and local state

I tillegg, som du ser, har jeg brukt valgfri kjeding for å forenkle koden. Typen til den lokale tilstanden vil automatisk bli tolket som number | undefined.

Fremfor alt, slik jeg forsto saken din, er det å ha et forhold mellom redux og lokal tilstand, da er det andre alternativet det eneste. Hvis din intensjon var å bare sette standardverdien, er det da ikke nødvendig å bruke useEffect i det hele tatt.

Relaterte artikler