{"library":"redux-bundler-async-resources","title":"Redux-Bundler Async Resources","description":"This package provides bundle factories for `redux-bundler`, specializing in the management of asynchronous data resources. It offers `createAsyncResourceBundle` for handling single remote resources and `createAsyncResourcesBundle` for managing collections of async resources, each with its own lifecycle, including loading, staleness, and expiration. Key features include configurable `staleAfter` and `expireAfter` durations to manage data freshness and automatic removal, a `dependencyKey` mechanism for conditional fetching and automatic cache invalidation based on upstream selector changes, and support for `doAdjust` actions to optimistically update resource state after mutations. The current stable version is 2.0.1. Releases appear to be ad-hoc, driven by new features or bug fixes, rather than a strict time-based cadence. It differentiates itself by providing a more robust and opinionated approach to async resource management within the `redux-bundler` ecosystem, extending beyond `redux-bundler`'s native capabilities.","language":"javascript","status":"active","last_verified":"Tue Apr 21","install":{"commands":["npm install redux-bundler-async-resources"],"cli":null},"imports":["import { createAsyncResourceBundle } from 'redux-bundler-async-resources'","import { createAsyncResourcesBundle } from 'redux-bundler-async-resources'","import { makeAsyncResourceBundleKeys } from 'redux-bundler-async-resources'","import { makeAsyncResourcesBundleKeys } from 'redux-bundler-async-resources'"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { createSelector } from 'redux-bundler';\nimport { createAsyncResourceBundle } from 'redux-bundler-async-resources';\nimport React from 'react';\n// Assume redux-bundler-hook is installed and configured for useConnect\nimport { useConnect } from 'redux-bundler-hook';\n\n// Mock shopApi for demonstration purposes\nconst shopApi = {\n  fetchHotCarDeals: () => {\n    return new Promise(resolve => {\n      setTimeout(() => {\n        const deals = [{ id: 1, name: 'Sedan Deal', price: 25000 }, { id: 2, name: 'SUV Offer', price: 35000 }];\n        console.log('Fetched hot car deals:', deals);\n        resolve(deals);\n      }, 1500); // Simulate network delay\n    });\n  }\n};\n\n// bundles/hotCarDeals.js\nconst hotCarDealsBundle = {\n  ...createAsyncResourceBundle({\n    name: 'hotCarDeals',\n    staleAfter: 180000, // refresh every 3 minutes\n    expireAfter: 60 * 60000, // delete if not refreshed in an hour\n    getPromise: ({ shopApi: apiContext }) => apiContext.fetchHotCarDeals(),\n  }),\n\n  reactShouldFetchHotCarDeals: createSelector(\n    'selectHotCarDealsIsPendingForFetch',\n    shouldFetch => {\n      if (shouldFetch) {\n        return { actionCreator: 'doFetchHotCarDeals' };\n      }\n    }\n  ),\n};\n\n// Component usage example (HotCarDeals.js)\nconst ErrorMessage = ({ error }) => <div style={{ color: 'red' }}>Error: {error?.message}</div>;\nconst Spinner = () => <div>Loading...</div>;\nconst CarDealsList = ({ deals }) => (\n  <div>\n    <h3>Hot Car Deals</h3>\n    <ul>\n      {deals.map(deal => (\n        <li key={deal.id}>{deal.name}: ${deal.price}</li>\n      ))}\n    </ul>\n  </div>\n);\n\nexport default function HotCarDealsComponent() {\n  // In a real app, 'shopApi' would be part of your main bundle's context\n  const { hotCarDeals, hotCarDealsError } = useConnect(\n      'selectHotCarDeals',\n      'selectHotCarDealsError'\n  );\n\n  if (!hotCarDeals && hotCarDealsError) {\n    return <ErrorMessage error={hotCarDealsError} />;\n  }\n\n  if (!hotCarDeals) {\n    return <Spinner />;\n  }\n\n  return <CarDealsList deals={hotCarDeals} />;\n}\n\n// To run this:\n// 1. Create a root bundler (e.g., composeBundles(hotCarDealsBundle, { getShopApi: () => shopApi }))\n// 2. Wrap your app in <BundlerProvider bundler={store} />\n// 3. Render <HotCarDealsComponent />","lang":"javascript","description":"Demonstrates how to define an async resource bundle for fetching and managing a single list of hot car deals, integrating it with a React component using `redux-bundler-hook`.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}