Pirkinių krepšelis yra būtina bet kurios elektroninės prekybos svetainės dalis. Tai leidžia klientams laikyti ir įsigyti produktus.
„Next.js“ el. prekybos programoje galite naudoti „Context API“ ir „useReducer“ kabliuką, kad sukurtumėte krepšelį. Kontekstinė API supaprastina krepšelio duomenų dalijimąsi tarp komponentų, o „useReducer“ tvarko krepšelio būseną.
Produkto puslapio kūrimas
Puslapių aplanke sukurkite naują failą Product.jsx, kuris atvaizduoja vieną produktą.
eksportuotinumatytasfunkcijaProduktas({id, pavadinimas, kaina}) {
grąžinti (
{vardas}</p>
{kaina}</p>
Produkto komponentas priima prekės ID, pavadinimą, kainą ir parodo jį. Taip pat yra mygtukas "Įdėti į krepšelį".
Kai prekė jau įtraukta į krepšelį, mygtukas turi persijungti į mygtuką „Išimti iš krepšelio“, o jei prekės krepšelyje nėra, puslapyje turi būti rodomas mygtukas „Į krepšelį“.
Norėdami įdiegti šią funkciją, turėsite sekti krepšelyje esančias prekes naudojant kontekstinę API ir naudokite Reducer kabliuką.
Pirkinių krepšelio kūrimas naudojant konteksto API
Kontekstinė API leidžia dalytis duomenimis tarp skirtingų komponentų, nereikės rankiniu būdu perduoti rekvizitų iš tėvų vaikui. Šie komponentai gali būti naršymo juosta, produkto informacijos puslapis arba atsiskaitymo puslapis.
Sukurkite naują failą pavadinimu cartContext.js aplanke, vadinamame kontekstu, ir sukurkite kontekstą.
importuoti { CreateContext } iš"reaguoti";
eksportuotikonst CartContext = createContext({
elementai: [],
});
„CartContext“ naudoja elementų masyvą kaip numatytąją vertę.
Tada sukurkite konteksto teikėją. Konteksto teikėjas leidžia komponentams, kurie naudoja kontekstą, užsiprenumeruoti konteksto pakeitimus.
Naujoje funkcijoje, pavadintoje cartProvider, pridėkite:
eksportuotikonst Krepšelio teikėjas = ({vaikai}) => {
grąžinti<Krepšelio kontekstas. Teikėjas>{vaikai}Krepšelio kontekstas. Teikėjas>;
};
Norėdami stebėti krepšelyje esančias prekes, naudosite „useReducer“ kabliuką.
„useReducer Hook“ veikia kaip „useState“ kabliukas, išskyrus tai, kad jis padeda valdyti sudėtingesnę būsenos logiką. Jis priima reduktoriaus funkciją ir pradinę būseną. Jis grąžina esamą būseną ir siuntimo funkciją, kuri perduoda veiksmą reduktoriaus funkcijai.
Sukurkite naują funkciją pavadinimu CartReducer ir pridėkite reduktorių.
konst cartReducer = (būsena, veiksmas) => {
konst { tipas, naudingoji apkrova } = veiksmas;jungiklis (tipas) {
atveju"PAPILDYTI":
grąžinti {
...valstybė,
prekės: payload.items,
};atveju"PAŠALINTI":
grąžinti {
...valstybė,
prekės: payload.items,
};
numatytas:
mestinaujasKlaida(„Nėra tokio tipo atvejo“);
}
};
Reduktoriaus funkcija apima jungiklio teiginį, kuris atnaujina būseną priklausomai nuo veiksmo tipo. Krepšelio reduktoriaus funkcija turi veiksmus „PRIDĖTI“ ir „PAŠALINTI“, kurie atitinkamai pridedami prie krepšelio ir išimami iš krepšelio.
Sukūrę reduktoriaus funkciją, naudokite ją useReducer kabliuke. Pradėkite nuo CartProvider funkcijos sukūrimo. Tai funkcija, kuri suteiks kontekstą kitiems komponentams.
eksportuotikonst Krepšelio teikėjas = ({vaikai}) => {
grąžinti<Krepšelio kontekstas. Teikėjas>{vaikai}Krepšelio kontekstas. Teikėjas>;
}
Tada sukurkite „useReducer“ kabliuką.
eksportuotikonst Krepšelio teikėjas = ({vaikai}) => {
konst [būsena, išsiuntimas] = useReducer (cartReducer, { daiktų: [] });
grąžinti<Krepšelio kontekstas. Teikėjas>{vaikai}Krepšelio kontekstas. Teikėjas>;
};
Išsiuntimo funkcija yra atsakinga už krepšelio būsenos atnaujinimą, todėl pakeiskite CartProvider funkciją, kad įtrauktumėte funkcijas, kurios siunčia produktus į useReducer kabliuką, kai krepšelis atnaujinamas.
importuoti { CreateContext, useReducer } iš"reaguoti";eksportuotikonst Krepšelio teikėjas = ({vaikai}) => {
konst [būsena, išsiuntimas] = useReducer (cartReducer, originalState);konst AddToCart = (produktas) => {
konst updatedCart = [...state.elementai, produktas];išsiuntimas({
tipas: "PAPILDYTI",
naudingoji apkrova: {
prekės: atnaujintas krepšelis,
},
});
};konst pašalinti iš krepšelio = (id) => {
konst updatedCart = state.items.filter(
(currentProduct) => currentProduct.id !== id
);išsiuntimas({
tipas: "PAŠALINTI",
naudingoji apkrova: {
prekės: atnaujintas krepšelis,
},
});
};
grąžinti<Krepšelio kontekstas. Teikėjas>{vaikai}Krepšelio kontekstas. Teikėjas>;
};
Funkcija addToCart prideda naują produktą prie esamų produktų ir grąžina atnaujintus produktus siuntimo funkcijos naudingojo krovinio objekte. Taip pat funkcija removeFromCart išfiltruoja prekę pagal ID ir grąžina atnaujintą sąrašą.
Taip pat turite grąžinti vertės pasiūlymą „CartContext“ teikėje.
eksportuotikonst Krepšelio teikėjas = ({vaikai}) => {
konst [būsena, išsiuntimas] = useReducer (cartReducer, {
elementai: [],
});konst AddToCart = (produktas) => {};
konst pašalinti iš krepšelio = (id) => {};konst vertė = {
elementai: state.items,
į krepšelį,
pašalinti iš krepšelio,
};
grąžinti<Krepšelio kontekstas. Teikėjasvertė={value}>{vaikai}Krepšelio kontekstas. Teikėjas>;
}
Vertės rekvizitas suvartojamas naudojant „useContext“ kabliuką.
Krepšelio vartojimo kontekstas
Iki šiol sukūrėte krepšelio kontekstą ir sukūrėte funkciją useReducer, kuri atnaujina krepšelį. Tada naudosite krepšelio kontekstą produkto komponente, naudodami „useContext“ kabliuką.
Pradėkite apvyniodami index.js, pagrindinį komponentą, su konteksto teikėju, kad konteksto reikšmės būtų pasiekiamos visoje programoje.
importuoti { Krepšelio teikėjas } iš"../context/cartContext";funkcija„MyApp“.({ Komponentas, puslapio rekvizitai }) {
grąžinti (
</CartProvider>
);
}
eksportuotinumatytas „MyApp“;
Tada importuokite „useContext“ kabliuką ir krepšelio konteksto teikėją į „Product.js“.
importuoti { useContext } iš"reaguoti"
importuoti { Krepšelio kontekstas } iš"../context/cartContext"eksportuotinumatytasfunkcijaProduktas() {
konst {items, addToCart, removeFromCart} = useContext (CartContext)
grąžinti (
<>{vardas}</p>
{kaina}</p>
Mygtuko funkcija priklauso nuo to, ar prekė jau yra krepšelyje. Jei prekė yra krepšelyje, mygtukas turi ją išimti iš krepšelio, o jei prekės krepšelyje dar nėra, pridėti. Tai reiškia, kad turite sekti elemento būseną naudodami useEffect ir useState. Kodas useEffect patikrina, ar prekė yra krepšelyje, kai komponentas pateikiamas, o useState atnaujina prekės būseną.
konst [egzistuoja, setExists] = useState(klaidinga);useEffect (() => {
konst inCart = elementai.rasti((daiktas) => item.id id);
jeigu (krepšelyje) {
setExists(tiesa);
} Kitas {
setExists(klaidinga);
}
}, [elementai, ID]);
Dabar naudoti sąlyginį atvaizdavimą kad būtų rodomas mygtukas pagal esamą būseną.
grąžinti (
{vardas}</p>
{kaina}</p>
{
egzistuoja
? <mygtukąpaspaudus={() => RemoveFromCart (id)}> Pašalinti iš krepšeliomygtuką>
: <mygtukąpaspaudus={() => addToCart({id, name, price})}> Pridėti į krepšelįmygtuką>
}
</div>
)
Atminkite, kad onClick tvarkyklės funkcijos yra removeFromCart ir addToCart funkcijos, apibrėžtos konteksto teikėjo.
Krepšelio pridėjimas daugiau funkcijų
Sužinojote, kaip sukurti pirkinių krepšelį naudodami kontekstinę API ir „useReducer“ kabliuką.
Nors šiame vadove aptariamos tik pridėjimo ir pašalinimo funkcijos, galite naudoti tas pačias sąvokas norėdami pridėti daugiau funkcijų, pvz., reguliuoti krepšelio prekių kiekį. Svarbiausia suprasti konteksto API ir kaip naudoti kabliukus norint atnaujinti krepšelio informaciją.
