Корпа за куповину је суштински део сваког сајта за е-трговину. Омогућава купцима да складиште и купују производе.
У Нект.јс апликацији за е-трговину, можете да користите Цонтект АПИ и усеРедуцер куку за креирање колица. Контекстни АПИ поједностављује дељење података колица између компоненти док усеРедуцер управља стањем колица.
Креирање странице производа
У фасцикли страница креирајте нову датотеку под називом Продуцт.јск која приказује један производ.
извозУобичајенофункцијаПроизвод({ид, име, цена}) {
повратак (
{наме}</p>
{прице}</p>
Компонента производа прихвата ИД, назив и цену производа и приказује их. Такође има дугме „Додај у корпу“.
Када је производ већ додат у корпу, дугме треба да се пребаци на дугме „уклони из корпе“, а ако производ није у корпи, на страници треба да се прикаже дугме „Додај у корпу“.
Да бисте применили ову функцију, мораћете да пратите ставке у корпи
користећи контекстни АПИ и кука усеРедуцер.Креирање корпе за куповину помоћу контекстног АПИ-ја
Контекстни АПИ вам омогућава да делите податке у различитим компонентама без потребе да ручно преносите реквизите са родитеља на дете. Ове компоненте могу бити трака за навигацију, страница са детаљима о производу или страница за плаћање.
Креирајте нову датотеку под називом цартЦонтект.јс у фасцикли која се зове контекст и креирајте контекст.
увоз { цреатеЦонтект } из"реаговати";
извозконст ЦартЦонтект = цреатеЦонтект({
ставке: [],
});
ЦартЦонтект узима низ ставки као подразумевану вредност.
Затим креирајте добављача контекста. Добављач контекста дозвољава компонентама које конзумирају контекст да се претплате на промене контекста.
У нову функцију која се зове цартПровидер, додајте следеће:
извозконст ЦартПровидер = ({ деца }) => {
повратак<ЦартЦонтект. Провајдер>{деца}ЦартЦонтект. Провајдер>;
};
Да бисте пратили артикле у корпи, користићете куку усеРедуцер.
УсеРедуцер закачива ради као усеСтате кука осим што помаже у управљању сложенијом логиком стања. Прихвата функцију редуктора и почетно стање. Враћа тренутно стање и диспечерску функцију која прослеђује акцију редукторској функцији.
Направите нову функцију под називом ЦартРедуцер и додајте редуктор.
конст цартРедуцер = (стање, акција) => {
конст { тип, носивост } = акција;прекидач (тип) {
случај"ДОДАТИ":
повратак {
...држава,
ставке: паилоад.итемс,
};случај„УКЛОНИ“:
повратак {
...држава,
ставке: паилоад.итемс,
};
Уобичајено:
бацитиНоваГрешка("Нема случаја за ту врсту");
}
};
Функција редуктора садржи наредбу свитцх која ажурира стање у зависности од врсте акције. Функција смањивања колица има акције „ДОДАЈ“ и „Уклони“ које додају у корпу и уклањају из корпе.
Након креирања функције редуктора, користите је у куки усеРедуцер. Започните креирањем функције ЦартПровидер. Ово је функција која ће пружити контекст другим компонентама.
извозконст ЦартПровидер = ({деца}) => {
повратак<ЦартЦонтект. Провајдер>{деца}ЦартЦонтект. Провајдер>;
}
Затим креирајте усеРедуцер куку.
извозконст ЦартПровидер = ({ деца }) => {
конст [стање, отпрема] = усеРедуцер (цартРедуцер, { ставке: [] });
повратак<ЦартЦонтект. Провајдер>{деца}ЦартЦонтект. Провајдер>;
};
Функција отпреме је одговорна за ажурирање стања колица, па модификујте функцију ЦартПровидер тако да укључује функције које отпремају производе на усеРедуцер куку када се колица ажурира.
увоз { цреатеЦонтект, усеРедуцер } из"реаговати";извозконст ЦартПровидер = ({ деца }) => {
конст [стање, отпрема] = усеРедуцер (цартРедуцер, инитиалСтате);конст аддТоЦарт = (производ) => {
конст упдатедЦарт = [...стате.итемс, продуцт];депеша({
тип: "ДОДАТИ",
носивост: {
артикли: упдатедЦарт,
},
});
};конст ремовеФромЦарт = (ид) => {
конст упдатедЦарт = стате.итемс.филтер(
(цуррентПродуцт) => цуррентПродуцт.ид !== ид
);депеша({
тип: „УКЛОНИ“,
носивост: {
артикли: упдатедЦарт,
},
});
};
повратак<ЦартЦонтект. Провајдер>{деца}ЦартЦонтект. Провајдер>;
};
АддТоЦарт функција додаје нови производ постојећим производима и враћа ажуриране производе у објекту корисног оптерећења функције за отпрему. Слично, функција ремовеФромЦарт филтрира ставку према ИД-у и враћа ажурирану листу.
Такође морате да вратите вредност проп у ЦартЦонтект провајдеру.
извозконст ЦартПровидер = ({ деца }) => {
конст [стање, отпрема] = усеРедуцер (цартРедуцер, {
ставке: [],
});конст аддТоЦарт = (производ) => {};
конст ремовеФромЦарт = (ид) => {};конст вредност = {
ставке: стате.итемс,
Додај у колица,
уклони из колица,
};
повратак<ЦартЦонтект. Провајдервредност={валуе}>{деца}ЦартЦонтект. Провајдер>;
}
Вредност пропс се користи преко усеЦонтект куке.
Конзумирање контекста колица
До сада сте креирали контекст колица и креирали функцију усеРедуцер која ажурира корпу. Затим ћете искористити контекст корпе у компоненти производа помоћу куке усеЦонтект.
Почните тако што ћете омотати индек.јс, горњу компоненту, са провајдером контекста да би вредности контекста биле доступне у целој апликацији.
увоз { ЦартПровидер } из"../цонтект/цартЦонтект";функцијаМиАпп({ Компонента, пагеПропс }) {
повратак (
</CartProvider>
);
}
извозУобичајено МиАпп;
Затим увезите усеЦонтект куку и добављач контекста колица у Продуцт.јс
увоз { усеЦонтект } из"реаговати"
увоз { ЦартЦонтект } из"../цонтект/цартЦонтект"извозУобичајенофункцијаПроизвод() {
конст {итемс, аддТоЦарт, ремовеФромЦарт} = усеЦонтект (ЦартЦонтект)
повратак (
<>{наме}</p>
{прице}</p>
Функција дугмета зависи од тога да ли је артикал већ у корпи. Ако артикал постоји у корпи, дугме треба да га уклони из корпе, а ако артикал већ није у корпи, треба га додати. То значи да морате да пратите стање ставке користећи усеЕффецт и усеСтате. УсеЕффецт код проверава да ли је ставка у корпи након што се компонента рендерује, док усеСтате ажурира стање ставке.
конст [постоји, сетЕкистс] = усеСтате(лажно);усеЕффецт(() => {
конст инЦарт = итемс.финд((предмет) => итем.ид ид);
ако (у колици) {
сетЕкистс(истина);
} друго {
сетЕкистс(лажно);
}
}, [ставке, ид]);
Сада, користите условно приказивање да бисте приказали дугме на основу постојећег стања.
повратак (
{наме}</p>
{прице}</p>
{
постоји
? <дугмеонЦлицк={() => ремовеФромЦарт (ид)}>Уклони из корпедугме>
: <дугмеонЦлицк={() => аддТоЦарт({ид, наме, прице})}>Додај у корпудугме>
}
</div>
)
Имајте на уму да су функције руковаоца онЦлицк функције ремовеФромЦарт и аддТоЦарт дефинисане у провајдеру контекста.
Додавање више функционалности у корпу
Научили сте како да креирате корпу за куповину користећи контекстни АПИ и усеРедуцер куку.
Иако је овај водич покривао само функције додавања и уклањања, можете користити исте концепте да додате више функција као што је подешавање количине артикала у корпи. Кључна ствар је разумевање контекстног АПИ-ја и начина на који се користе куке за ажурирање детаља колица.
