I explain step by step how I managed the state of a product using React Redux Toolkit.
Note: This practice project is not mobile-responsive.

Step 1: First, I installed the React app and then removed the default data that comes with it. After that, I installed React-Redux.

Step 2: I created a "components" folder and defined component files within it: "cart.js", "home.js", "navbar.js", and "product.js".

Step 3: In the "navbar.js" file, I created a navbar component with links to "Home" and "Cart", and also added functionality to count the CartItems.

Step 4: In the "product.js" file, I added code to display product-related information such as title, image, price, and an "Add to Cart" button.

Step 5: On the home page, I imported and called the product component to display products. Step 6: In the "Cart.js" component, I displayed the added-to-cart products, and also added accounting CSS.

Step 6: I created a "store" folder alongside the "components" folder and within it, I created three files: "cartSlice.js", "productSlice.js", and "store.js". These files are used to manage the state.

Step 7: In the "productSlice.js" file, I fetched product data from the API "https://fakestoreapi.com/products" and stored it in the Redux store.

Step 8: In the "App.js" file, I imported the Redux Provider and the store using the following code:

jsxCopy code
import { Provider } from 'react-redux';
import store from './store/store';

<Provider store={store}>
    <div className='App'>
        <BrowserRouter>
            <NavBar />
            <Routes>
                <Route path='/' element={<Home />} />
                <Route path='/cart' element={<Cart />} />
            </Routes>
        </BrowserRouter>
    </div>
</Provider>

Then, I fetched data from the store in the "Product.js" component, which I was previously fetching from the API, and rendered it on the page.