redux-bundler-async-resources

import { createSelector } from 'redux-bundler'; import { createAsyncResourceBundle } from 'redux-bundler-async-resources'; import React from 'react'; // Assume redux-bundler-hook is installed and configured for useConnect import { useConnect } from 'redux-bundler-hook'; // Mock shopApi for demonstration purposes const shopApi = { fetchHotCarDeals: () => { return new Promise(resolve => { setTimeout(() => { const deals = [{ id: 1, name: 'Sedan Deal', price: 25000 }, { id: 2, name: 'SUV Offer', price: 35000 }]; console.log('Fetched hot car deals:', deals); resolve(deals); }, 1500); // Simulate network delay }); } }; // bundles/hotCarDeals.js const hotCarDealsBundle = { ...createAsyncResourceBundle({ name: 'hotCarDeals', staleAfter: 180000, // refresh every 3 minutes expireAfter: 60 * 60000, // delete if not refreshed in an hour getPromise: ({ shopApi: apiContext }) => apiContext.fetchHotCarDeals(), }), reactShouldFetchHotCarDeals: createSelector( 'selectHotCarDealsIsPendingForFetch', shouldFetch => { if (shouldFetch) { return { actionCreator: 'doFetchHotCarDeals' }; } } ), }; // Component usage example (HotCarDeals.js) const ErrorMessage = ({ error }) => <div style={{ color: 'red' }}>Error: {error?.message}</div>; const Spinner = () => <div>Loading...</div>; const CarDealsList = ({ deals }) => ( <div> <h3>Hot Car Deals</h3> <ul> {deals.map(deal => ( <li key={deal.id}>{deal.name}: ${deal.price}</li> ))} </ul> </div> ); export default function HotCarDealsComponent() { // In a real app, 'shopApi' would be part of your main bundle's context const { hotCarDeals, hotCarDealsError } = useConnect( 'selectHotCarDeals', 'selectHotCarDealsError' ); if (!hotCarDeals && hotCarDealsError) { return <ErrorMessage error={hotCarDealsError} />; } if (!hotCarDeals) { return <Spinner />; } return <CarDealsList deals={hotCarDeals} />; } // To run this: // 1. Create a root bundler (e.g., composeBundles(hotCarDealsBundle, { getShopApi: () => shopApi })) // 2. Wrap your app in <BundlerProvider bundler={store} /> // 3. Render <HotCarDealsComponent />