I've created a super simple e-commerce application with react, react-redux, react-router, and redux-persist.

Each url or "route" was made with react-router in the react index.js file.

        <BrowserRouter>
          <Routes>
            <Route path="/" element={<App />} />
            <Route path="/cart" element={<Cart />} />
            <Route path="/products" element={<ProductContainer />} />
            <Route path="*" element={<Error />} />
          </Routes>
        </BrowserRouter>

All of the products in the application were fetched and moved around using the useDispatch and useSelector functions from react-redux.

There were two simple actions made to move items to the cart and to remove them as well.

function rootReducer(state = initialState, action) {
  switch (action.type) {
    case ADD_TO_CART:
      return {
        ...state,
        cart: [...state.cart, action.payload],
      };

    case REMOVE:
      return {
        ...state,
        cart: state.cart.filter((item) => item !== action.payload),
      };

    default:
      return state;
  }
}

Redux-persist was necessary to use to prevent the items in the cart from disappearing when the user would switch to another page.

There was definitely more functionality I wanted to add to this little application, but I either ran out of time or couldn't figure out how to work other installed packages.

But if you want to play around with the code or read a little bit more about this application, checkout the github for it here.