Um carrinho de compras é uma parte essencial de qualquer site de comércio eletrônico. Ele permite que os clientes armazenem e comprem produtos.
Em um aplicativo de comércio eletrônico Next.js, você pode usar a API Context e o gancho useReducer para criar um carrinho. A API de contexto simplifica o compartilhamento de dados do carrinho entre os componentes, enquanto o useReducer manipula o estado do carrinho.
Criando a página do produto
Na pasta pages, crie um novo arquivo chamado Product.jsx que renderiza um único produto.
exportarpadrãofunçãoprodutos({id, nome, preço}) {
retornar (
{nome}</p>
{preço}</p>
O componente do produto aceita o ID, o nome e o preço de um produto e o exibe. Ele também tem um botão "Adicionar ao carrinho".
Quando um produto já está adicionado ao carrinho, o botão deve mudar para um botão “remover do carrinho” e se um produto não estiver no carrinho, a página deve exibir o botão “Adicionar ao carrinho”.
Para implementar essa funcionalidade, você precisará acompanhar os itens no carrinho usando a API de contexto e o gancho useReducer.
Criando um carrinho de compras usando a API de contexto
A API de contexto permite que você compartilhe dados entre diferentes componentes sem ter que passar adereços manualmente de pai para filho. Esses componentes podem ser a barra de navegação, a página de detalhes do produto ou a página de checkout.
Crie um novo arquivo chamado cartContext.js em uma pasta chamada context e crie o context.
importar {criarContexto} de"reagir";
exportarconst CarrinhoContext = criarContexto({
Unid: [],
});
CartContext usa uma matriz de itens como valor padrão.
Em seguida, crie o provedor de contexto. Um provedor de contexto permite que os componentes que consomem o contexto assinem as alterações de contexto.
Em uma nova função chamada cartProvider, adicione o seguinte:
exportarconst CartProvider = ({ crianças }) => {
retornar<CartContext. Fornecedor>{crianças}CartContext. Fornecedor>;
};
Para acompanhar os itens no carrinho, você usará o hook useReducer.
O gancho useReducer funciona como o gancho useState, exceto que ajuda a gerenciar uma lógica de estado mais complexa. Ele aceita uma função redutora e o estado inicial. Ele retorna o estado atual e uma função de despacho que passa uma ação para a função redutora.
Crie uma nova função chamada CartReducer e adicione o redutor.
const cartReducer = (estado, ação) => {
const { tipo, carga útil } = ação;trocar (tipo) {
caso"ADICIONAR":
retornar {
...estado,
itens: payload.items,
};caso"REMOVER":
retornar {
...estado,
itens: payload.items,
};
padrão:
lançarnovoErro("Não há caso para esse tipo");
}
};
A função redutora compreende uma instrução switch que atualiza o estado dependendo do tipo de ação. A função do redutor de carrinho possui ações “ADICIONAR” e “REMOVER” que adicionam ao carrinho e removem do carrinho, respectivamente.
Depois de criar a função redutor, use-o no hook useReducer. Comece criando a função CartProvider. Esta é a função que fornecerá o contexto para outros componentes.
exportarconst CartProvider = ({crianças}) => {
retornar<CartContext. Fornecedor>{crianças}CartContext. Fornecedor>;
}
Em seguida, crie o hook useReducer.
exportarconst CartProvider = ({ crianças }) => {
const [estado, expedição] = useReducer (cartReducer, { Unid: [] });
retornar<CartContext. Fornecedor>{crianças}CartContext. Fornecedor>;
};
A função dispatch é responsável por atualizar o estado do carrinho, portanto, modifique a função CartProvider para incluir funções que despacham produtos para o gancho useReducer quando o carrinho é atualizado.
importar {criarContext, useRedutor} de"reagir";exportarconst CartProvider = ({ crianças }) => {
const [state, dispatch] = useReducer (cartReducer, initialState);const addToCart = (produtos) => {
const atualizadoCarrinho = [...estado.itens, produto];Despacho({
tipo: "ADICIONAR",
carga útil: {
itens: atualizadoCarrinho,
},
});
};const removeFromCart = (eu ia) => {
const UpdatedCart = state.items.filter(
(currentProduct) => currentProduct.id !== id
);Despacho({
tipo: "REMOVER",
carga útil: {
itens: atualizadoCarrinho,
},
});
};
retornar<CartContext. Fornecedor>{crianças}CartContext. Fornecedor>;
};
A função addToCart anexa o novo produto aos produtos existentes e retorna os produtos atualizados no objeto payload da função dispatch. Da mesma forma, a função removeFromCart filtra o item por ID e retorna a lista atualizada.
Você também precisa retornar a propriedade de valor no provedor CartContext.
exportarconst CartProvider = ({ crianças }) => {
const [estado, expedição] = useReducer (cartReducer, {
Unid: [],
});const addToCart = (produtos) => {};
const removeFromCart = (eu ia) => {};const valor = {
itens: estado.itens,
adicionar ao carrinho,
removeFromCart,
};
retornar<CartContext. Fornecedorvalor={valor}>{crianças}CartContext. Fornecedor>;
}
A propriedade de valor é consumida por meio do hook useContext.
Consumindo o Contexto do Carrinho
Até agora você criou o contexto do carrinho e criou uma função useReducer que atualiza o carrinho. Em seguida, você consumirá o contexto do carrinho no componente do produto usando o hook useContext.
Comece agrupando index.js, o componente principal, com o provedor de contexto para disponibilizar os valores de contexto em todo o aplicativo.
importar { Fornecedor do Carrinho } de"../contexto/contexto do carrinho";funçãoMeuAplicativo({ Componente, pageProps }) {
retornar (
</CartProvider>
);
}
exportarpadrão MeuAplicativo;
Em seguida, importe o gancho useContext e o provedor de contexto do carrinho em Product.js
importar { useContext } de"reagir"
importar { CartContext } de"../contexto/contexto do carrinho"exportarpadrãofunçãoprodutos() {
const {itens, addToCart, removeFromCart} = useContext (CartContext)
retornar (
<>{nome}</p>
{preço}</p>
A função do botão depende se o item já está no carrinho. Se existir um item no carrinho, o botão deve removê-lo do carrinho e se um item ainda não estiver no carrinho, deve adicioná-lo. Isso significa que você deve acompanhar o estado do item usando useEffect e useState. O código useEffect verifica se o item está no carrinho após a renderização do componente enquanto useState atualiza o estado do item.
const [existe, setExist] = useState(falso);useEffect(() => {
const inCart = items.find((item) => id do item.id);
se (no carrinho) {
setExists(verdadeiro);
} outro {
setExists(falso);
}
}, [itens, id]);
Agora, usar renderização condicional para mostrar o botão com base no estado existente.
retornar (
{nome}</p>
{preço}</p>
{
existe
? <botãoao clicar={() => removeFromCart (id)}>Remover do Carrinhobotão>
: <botãoao clicar={() => addToCart({id, nome, preço})}>Adicionar ao carrinhobotão>
}
</div>
)
Observe que as funções do manipulador onClick são as funções removeFromCart e addToCart definidas no provedor de contexto.
Adicionando mais funcionalidades ao carrinho
Você aprendeu como criar um carrinho de compras usando a API de contexto e o hook useReducer.
Embora este guia aborde apenas a funcionalidade de adicionar e remover, você pode usar os mesmos conceitos para adicionar mais recursos, como ajustar as quantidades de itens do carrinho. O crucial é entender a API de contexto e como usar ganchos para atualizar os detalhes do carrinho.
