Đầu tiên chúng ta cần cài recoil với lệnh

npm install recoil

Tiếp theo chúng ta sẽ cần tạo 1 list sản phẩm và 1 giỏ hàng .

Tạo 1 list sản phẩm :

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import Listproduct from './component/Listproduct';
import Cart from './component/Cart';
import { TotalCartState } from './state/CartState';
import { useRecoilValue} from 'recoil';
function App() {
  const totalcart = useRecoilValue(TotalCartState);
  return(
      <>
      <Listproduct></Listproduct>
      <Cart />
      <h3>{totalcart}</h3>
      </>
  );
}

export default App

Listproduct chúng ta code như sau :\src\component\Listproduct.tsx

import React from 'react';
import { Container } from 'react-bootstrap';
import Col from 'react-bootstrap/esm/Col';
import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
import { CartState } from '../state/CartState';
import { ProductlistState } from '../state/productState';

export const Sanpham = (props: any) => {
    const [cart, setCart] = useRecoilState(CartState);
    function addtoCart(cart: any, sanpham: any) {
        let newCart = [...cart];
        let vitri = -1;
        vitri = cart.findIndex((cart_item) => {
            return sanpham.id === cart_item.sanpham.id;
        });
        if (vitri >= 0) {
            newCart[vitri] = {
                // ...cart[vitri],
                id: cart[vitri].id,
                sanpham: cart[vitri].sanpham,
                gia: cart[vitri].gia,
                soluong: cart[vitri].soluong + 1,
            };
            setCart(newCart);
        }
        else {
            let item = { id: sanpham.id, sanpham: sanpham, soluong: 1, gia: sanpham.gia };
            newCart.push(item);
            console.log(newCart);
            setCart(newCart);
        }
    }
    function movetoCart(cart: any, sanpham: any) {

        let newCart = [...cart];
        let vitri = -1;
        vitri = cart.findIndex((cart_item :any) => {
            console.log(cart_item);
            return sanpham.id === cart_item.sanpham.id;
        })
        // nếu có vị trí trong giỏ hàng
        if (vitri >= 0) {
            if (newCart[vitri].soluong <= 1) {
                newCart.splice(vitri, 1);
                setCart(newCart);
            }else{
                newCart[vitri] = {
                    // ...cart[vitri],
                    id: cart[vitri].id,
                    sanpham: cart[vitri].sanpham,
                    gia: cart[vitri].gia,
                    soluong: cart[vitri].soluong - 1,
                };
                console.log(cart[vitri]);
                setCart(newCart);  
            }
        }
    }
    return (<>
        <Container>
            <Col style={{ display: 'flex' }}>
                <button onClick={() => movetoCart(cart, props.sanpham)}>Loại bỏ</button>
                <h3>{props.sanpham.name}</h3>
                <button onClick={() => addtoCart(cart, props.sanpham)}>Thêm vào giỏ hàng</button>
            </Col>
        </Container>
    </>);
}
const Listproduct = () => {
    const listsp = useRecoilValue(ProductlistState);
    return (
        <>
            {listsp.map((sanpham) => (
                <Sanpham sanpham={sanpham} key={sanpham.id} />
            ))}
        </>
    );
}
export default Listproduct;

Recoil chúng ta tạo state \src\state\ProductState.tsx

import { atom } from "recoil";

export const ProductlistState = atom(
    {
        key:'productlist',
        default:[
            {id: 1,gia :15000,name : 'Sản phẩm 1'},
            {id: 2,gia :25000,name : 'Sản phẩm 2'},
            {id: 3,gia :35000,name : 'Sản phẩm 3'},
        ]
    }
);

Cart chúng ta code như sau :

File state :\src\state\CartState.tsx

import {atom, selector} from 'recoil';
export const CartState = atom({
    key: 'cart',
    default:[
      //  {id:1,name: 'sản phẩm 1',soluong : 1,gia :14000},
    ],
}) ;
export const TotalCartState = selector({
    key:'totalCart',
    get:({get})=>{
        const cart = get(CartState);
        let total = 0;
        cart.forEach((item)=>{
            total = total + item.soluong * item.gia;
        })
        return total;
    }
});

File component : \src\component\Cart.tsx

import React from 'react';
import { useRecoilState, useRecoilValue ,useSetRecoilState} from 'recoil';
import { CartState } from '../state/CartState';
import { ProductlistState } from '../state/productState';
export const ShowCart = (props : any)=>{
    return(
        <>
            
            <h3>{props.item.sanpham.name}</h3>
            <h3>{props.item.soluong}</h3>
        </>
    )
}
const Cart = ()=>{
    const cart = useRecoilValue(CartState);
    return(
        <>
            {cart.map((itemcart :any)=>(
                <ShowCart item={itemcart} key={itemcart.id}/>
            ))}
        </>
    );
}
export default Cart;