| <!DOCTYPE html><html class="default" lang="en" data-base=".."><head><meta charset="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>docs/advanced/dependency-injection | react-declarative</title><meta name="description" content="Documentation for react-declarative"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script><script async src="../assets/hierarchy.js" id="tsd-hierarchy-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search"><div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-search"></use></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div><div class="field"><div id="tsd-toolbar-links"></div></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">react-declarative</a></div><div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb"><li><a href="../modules.html">react-declarative</a></li><li><a href="docs_advanced_dependency-injection.html">docs/advanced/dependency-injection</a></li></ul></div><div class="tsd-panel tsd-typography"><a id="dependency-injection-with-provide-and-inject" class="tsd-anchor"></a><h1 class="tsd-anchor-link">Dependency injection with provide and inject<a href="#dependency-injection-with-provide-and-inject" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h1><p><code>react-declarative</code> ships a lightweight inversion-of-control (IoC) container inspired by Angular's dependency injection system. You register service classes with <code>provide</code>, retrieve them anywhere with <code>inject</code>, and optionally define <code>prefetch</code> / <code>unload</code> lifecycle hooks that the built-in router calls automatically. The container prevents you from tangling API logic directly into components, which makes larger apps significantly easier to test and maintain.</p> |
| <a id="core-api" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Core API<a href="#core-api" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p>Three functions handle the entire lifecycle:</p> |
| <table> |
| <thead> |
| <tr> |
| <th>Function</th> |
| <th>What it does</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr> |
| <td><code>provide(key, factory)</code></td> |
| <td>Registers a factory function for a service key (lazy, singleton).</td> |
| </tr> |
| <tr> |
| <td><code>inject(key)</code></td> |
| <td>Retrieves—or creates on first use—the singleton instance for a key.</td> |
| </tr> |
| <tr> |
| <td><code>createServiceManager(name)</code></td> |
| <td>Creates an isolated IoC scope that falls back to the global one.</td> |
| </tr> |
| </tbody> |
| </table> |
| <p>All three are exported directly from <code>react-declarative</code>.</p> |
| <a id="defining-a-service-class" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Defining a service class<a href="#defining-a-service-class" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p>A service is any plain class. Implement the <code>IService</code> interface if you want lifecycle hooks.</p> |
| <pre><code class="typescript"><span class="hl-0">import</span><span class="hl-1"> { </span><span class="hl-2">IService</span><span class="hl-1"> } </span><span class="hl-0">from</span><span class="hl-1"> </span><span class="hl-3">"react-declarative"</span><span class="hl-1">;</span><br/><br/><span class="hl-0">export</span><span class="hl-1"> </span><span class="hl-4">class</span><span class="hl-1"> </span><span class="hl-7">ApiService</span><span class="hl-1"> </span><span class="hl-4">implements</span><span class="hl-1"> </span><span class="hl-7">IService</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-4">private</span><span class="hl-1"> </span><span class="hl-2">baseUrl</span><span class="hl-1"> = </span><span class="hl-3">"/api/v1"</span><span class="hl-1">;</span><br/><br/><span class="hl-1"> </span><span class="hl-4">async</span><span class="hl-1"> </span><span class="hl-5">getUser</span><span class="hl-1">(</span><span class="hl-2">id</span><span class="hl-1">: </span><span class="hl-7">string</span><span class="hl-1">) {</span><br/><span class="hl-1"> </span><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-10">res</span><span class="hl-1"> = </span><span class="hl-0">await</span><span class="hl-1"> </span><span class="hl-5">fetch</span><span class="hl-1">(</span><span class="hl-3">`</span><span class="hl-4">${</span><span class="hl-4">this</span><span class="hl-9">.</span><span class="hl-2">baseUrl</span><span class="hl-4">}</span><span class="hl-3">/users/</span><span class="hl-4">${</span><span class="hl-2">id</span><span class="hl-4">}</span><span class="hl-3">`</span><span class="hl-1">);</span><br/><span class="hl-1"> </span><span class="hl-0">return</span><span class="hl-1"> </span><span class="hl-2">res</span><span class="hl-1">.</span><span class="hl-5">json</span><span class="hl-1">();</span><br/><span class="hl-1"> }</span><br/><br/><span class="hl-1"> </span><span class="hl-4">async</span><span class="hl-1"> </span><span class="hl-5">prefetch</span><span class="hl-1">() {</span><br/><span class="hl-1"> </span><span class="hl-17">// Called when the route that uses this service is entered.</span><br/><span class="hl-1"> </span><span class="hl-17">// Use this to warm caches, open WebSocket connections, etc.</span><br/><span class="hl-1"> </span><span class="hl-0">await</span><span class="hl-1"> </span><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-5">getUser</span><span class="hl-1">(</span><span class="hl-3">"me"</span><span class="hl-1">);</span><br/><span class="hl-1"> }</span><br/><br/><span class="hl-1"> </span><span class="hl-4">async</span><span class="hl-1"> </span><span class="hl-5">unload</span><span class="hl-1">() {</span><br/><span class="hl-1"> </span><span class="hl-17">// Called when the route is left.</span><br/><span class="hl-1"> </span><span class="hl-17">// Clean up subscriptions, close connections, etc.</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">}</span> |
| </code><button type="button">Copy</button></pre> |
|
|
| <a id="registering-services" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Registering services<a href="#registering-services" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p>Call <code>provide</code> at the module level—before any component renders. Use a symbol as the key to avoid naming collisions.</p> |
| <pre><code class="typescript"><span class="hl-17">// ioc/TYPES.ts</span><br/><span class="hl-0">export</span><span class="hl-1"> </span><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-10">TYPES</span><span class="hl-1"> = {</span><br/><span class="hl-1"> </span><span class="hl-2">apiService:</span><span class="hl-1"> </span><span class="hl-5">Symbol</span><span class="hl-1">(</span><span class="hl-3">"apiService"</span><span class="hl-1">),</span><br/><span class="hl-1"> </span><span class="hl-2">authService:</span><span class="hl-1"> </span><span class="hl-5">Symbol</span><span class="hl-1">(</span><span class="hl-3">"authService"</span><span class="hl-1">),</span><br/><span class="hl-1">} </span><span class="hl-0">as</span><span class="hl-1"> </span><span class="hl-4">const</span><span class="hl-1">;</span><br/><br/><span class="hl-17">// ioc/config.ts</span><br/><span class="hl-0">import</span><span class="hl-1"> { </span><span class="hl-2">provide</span><span class="hl-1"> } </span><span class="hl-0">from</span><span class="hl-1"> </span><span class="hl-3">"react-declarative"</span><span class="hl-1">;</span><br/><span class="hl-0">import</span><span class="hl-1"> { </span><span class="hl-2">TYPES</span><span class="hl-1"> } </span><span class="hl-0">from</span><span class="hl-1"> </span><span class="hl-3">"./TYPES"</span><span class="hl-1">;</span><br/><span class="hl-0">import</span><span class="hl-1"> { </span><span class="hl-2">ApiService</span><span class="hl-1"> } </span><span class="hl-0">from</span><span class="hl-1"> </span><span class="hl-3">"./ApiService"</span><span class="hl-1">;</span><br/><span class="hl-0">import</span><span class="hl-1"> { </span><span class="hl-2">AuthService</span><span class="hl-1"> } </span><span class="hl-0">from</span><span class="hl-1"> </span><span class="hl-3">"./AuthService"</span><span class="hl-1">;</span><br/><br/><span class="hl-5">provide</span><span class="hl-1">(</span><span class="hl-10">TYPES</span><span class="hl-1">.</span><span class="hl-2">apiService</span><span class="hl-1">, () </span><span class="hl-4">=></span><span class="hl-1"> </span><span class="hl-4">new</span><span class="hl-1"> </span><span class="hl-5">ApiService</span><span class="hl-1">());</span><br/><span class="hl-5">provide</span><span class="hl-1">(</span><span class="hl-10">TYPES</span><span class="hl-1">.</span><span class="hl-2">authService</span><span class="hl-1">, () </span><span class="hl-4">=></span><span class="hl-1"> </span><span class="hl-4">new</span><span class="hl-1"> </span><span class="hl-5">AuthService</span><span class="hl-1">());</span> |
| </code><button type="button">Copy</button></pre> |
|
|
| <blockquote> |
| <p><strong>Note:</strong> <code>provide</code> uses a lazy singleton pattern. The factory runs the first time <code>inject</code> is called for that key—not when <code>provide</code> is called. Subsequent calls to <code>inject</code> return the same instance.</p> |
| </blockquote> |
| <a id="injecting-services-into-components-and-hooks" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Injecting services into components and hooks<a href="#injecting-services-into-components-and-hooks" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p>Call <code>inject</code> anywhere outside the React render cycle—in hooks, callbacks, or module scope. The container resolves dependencies automatically.</p> |
| <pre><code class="typescript"><span class="hl-17">// ioc/ioc.ts</span><br/><span class="hl-0">import</span><span class="hl-1"> { </span><span class="hl-2">inject</span><span class="hl-1"> } </span><span class="hl-0">from</span><span class="hl-1"> </span><span class="hl-3">"react-declarative"</span><span class="hl-1">;</span><br/><span class="hl-0">import</span><span class="hl-1"> { </span><span class="hl-2">TYPES</span><span class="hl-1"> } </span><span class="hl-0">from</span><span class="hl-1"> </span><span class="hl-3">"./TYPES"</span><span class="hl-1">;</span><br/><span class="hl-0">import</span><span class="hl-1"> { </span><span class="hl-2">ApiService</span><span class="hl-1"> } </span><span class="hl-0">from</span><span class="hl-1"> </span><span class="hl-3">"./ApiService"</span><span class="hl-1">;</span><br/><span class="hl-0">import</span><span class="hl-1"> { </span><span class="hl-2">AuthService</span><span class="hl-1"> } </span><span class="hl-0">from</span><span class="hl-1"> </span><span class="hl-3">"./AuthService"</span><span class="hl-1">;</span><br/><br/><span class="hl-0">export</span><span class="hl-1"> </span><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-10">ioc</span><span class="hl-1"> = {</span><br/><span class="hl-1"> </span><span class="hl-2">apiService:</span><span class="hl-1"> </span><span class="hl-5">inject</span><span class="hl-1"><</span><span class="hl-7">ApiService</span><span class="hl-1">>(</span><span class="hl-10">TYPES</span><span class="hl-1">.</span><span class="hl-2">apiService</span><span class="hl-1">),</span><br/><span class="hl-1"> </span><span class="hl-2">authService:</span><span class="hl-1"> </span><span class="hl-5">inject</span><span class="hl-1"><</span><span class="hl-7">AuthService</span><span class="hl-1">>(</span><span class="hl-10">TYPES</span><span class="hl-1">.</span><span class="hl-2">authService</span><span class="hl-1">),</span><br/><span class="hl-1">};</span> |
| </code><button type="button">Copy</button></pre> |
|
|
| <p>Then use the <code>ioc</code> object in your components:</p> |
| <pre><code class="tsx"><span class="hl-0">import</span><span class="hl-1"> { </span><span class="hl-2">ioc</span><span class="hl-1"> } </span><span class="hl-0">from</span><span class="hl-1"> </span><span class="hl-3">"./ioc/ioc"</span><span class="hl-1">;</span><br/><br/><span class="hl-0">export</span><span class="hl-1"> </span><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-5">UserProfile</span><span class="hl-1"> = ({ </span><span class="hl-2">id</span><span class="hl-1"> }: { </span><span class="hl-2">id</span><span class="hl-1">: </span><span class="hl-7">string</span><span class="hl-1"> }) </span><span class="hl-4">=></span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-4">const</span><span class="hl-1"> [</span><span class="hl-10">user</span><span class="hl-1">, </span><span class="hl-10">setUser</span><span class="hl-1">] = </span><span class="hl-5">useState</span><span class="hl-1">(</span><span class="hl-4">null</span><span class="hl-1">);</span><br/><br/><span class="hl-1"> </span><span class="hl-5">useEffect</span><span class="hl-1">(() </span><span class="hl-4">=></span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-2">ioc</span><span class="hl-1">.</span><span class="hl-2">apiService</span><span class="hl-1">.</span><span class="hl-5">getUser</span><span class="hl-1">(</span><span class="hl-2">id</span><span class="hl-1">).</span><span class="hl-5">then</span><span class="hl-1">(</span><span class="hl-2">setUser</span><span class="hl-1">);</span><br/><span class="hl-1"> }, [</span><span class="hl-2">id</span><span class="hl-1">]);</span><br/><br/><span class="hl-1"> </span><span class="hl-0">if</span><span class="hl-1"> (!</span><span class="hl-2">user</span><span class="hl-1">) </span><span class="hl-0">return</span><span class="hl-1"> </span><span class="hl-4">null</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-0">return</span><span class="hl-1"> </span><span class="hl-6"><</span><span class="hl-18">div</span><span class="hl-6">></span><span class="hl-4">{</span><span class="hl-2">user</span><span class="hl-9">.</span><span class="hl-2">name</span><span class="hl-4">}</span><span class="hl-6"></</span><span class="hl-18">div</span><span class="hl-6">></span><span class="hl-1">;</span><br/><span class="hl-1">};</span> |
| </code><button type="button">Copy</button></pre> |
|
|
| <a id="scoped-containers-with-createservicemanager" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Scoped containers with createServiceManager<a href="#scoped-containers-with-createservicemanager" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p>For feature-level isolation—for example, a checkout flow that needs its own service instances separate from the global container—use <code>createServiceManager</code>.</p> |
| <pre><code class="typescript"><span class="hl-0">import</span><span class="hl-1"> { </span><span class="hl-2">createServiceManager</span><span class="hl-1"> } </span><span class="hl-0">from</span><span class="hl-1"> </span><span class="hl-3">"react-declarative"</span><span class="hl-1">;</span><br/><span class="hl-0">import</span><span class="hl-1"> { </span><span class="hl-2">CheckoutService</span><span class="hl-1"> } </span><span class="hl-0">from</span><span class="hl-1"> </span><span class="hl-3">"./CheckoutService"</span><span class="hl-1">;</span><br/><br/><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-10">CHECKOUT_TYPES</span><span class="hl-1"> = {</span><br/><span class="hl-1"> </span><span class="hl-2">checkoutService:</span><span class="hl-1"> </span><span class="hl-5">Symbol</span><span class="hl-1">(</span><span class="hl-3">"checkoutService"</span><span class="hl-1">),</span><br/><span class="hl-1">};</span><br/><br/><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-10">checkoutContainer</span><span class="hl-1"> = </span><span class="hl-5">createServiceManager</span><span class="hl-1">(</span><span class="hl-3">"checkout"</span><span class="hl-1">);</span><br/><br/><span class="hl-2">checkoutContainer</span><span class="hl-1">.</span><span class="hl-5">provide</span><span class="hl-1">(</span><br/><span class="hl-1"> </span><span class="hl-10">CHECKOUT_TYPES</span><span class="hl-1">.</span><span class="hl-2">checkoutService</span><span class="hl-1">,</span><br/><span class="hl-1"> () </span><span class="hl-4">=></span><span class="hl-1"> </span><span class="hl-4">new</span><span class="hl-1"> </span><span class="hl-5">CheckoutService</span><span class="hl-1">()</span><br/><span class="hl-1">);</span><br/><br/><span class="hl-17">// inject first looks in the local container, then falls back to global</span><br/><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-10">checkoutService</span><span class="hl-1"> = </span><span class="hl-2">checkoutContainer</span><span class="hl-1">.</span><span class="hl-5">inject</span><span class="hl-1"><</span><span class="hl-7">CheckoutService</span><span class="hl-1">>(</span><br/><span class="hl-1"> </span><span class="hl-10">CHECKOUT_TYPES</span><span class="hl-1">.</span><span class="hl-2">checkoutService</span><br/><span class="hl-1">);</span> |
| </code><button type="button">Copy</button></pre> |
|
|
| <p>The scoped <code>inject</code> checks the local container first, then falls back to the global <code>serviceManager</code>. This lets feature modules override global services without breaking the rest of the app.</p> |
| <a id="route-level-lifecycle-hooks" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Route-level lifecycle hooks<a href="#route-level-lifecycle-hooks" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p>The built-in <code><Switch /></code> router calls <code>prefetch</code> when a route is entered and <code>unload</code> when it is left. Wire them directly into your route definitions:</p> |
| <pre><code class="tsx"><span class="hl-0">import</span><span class="hl-1"> { </span><span class="hl-2">Switch</span><span class="hl-1"> } </span><span class="hl-0">from</span><span class="hl-1"> </span><span class="hl-3">"react-declarative"</span><span class="hl-1">;</span><br/><span class="hl-0">import</span><span class="hl-1"> { </span><span class="hl-2">ioc</span><span class="hl-1"> } </span><span class="hl-0">from</span><span class="hl-1"> </span><span class="hl-3">"./ioc/ioc"</span><span class="hl-1">;</span><br/><br/><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-10">routes</span><span class="hl-1"> = [</span><br/><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-2">path:</span><span class="hl-1"> </span><span class="hl-3">"/dashboard"</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-5">guard</span><span class="hl-2">:</span><span class="hl-1"> </span><span class="hl-4">async</span><span class="hl-1"> () </span><span class="hl-4">=></span><span class="hl-1"> </span><span class="hl-0">await</span><span class="hl-1"> </span><span class="hl-2">ioc</span><span class="hl-1">.</span><span class="hl-2">authService</span><span class="hl-1">.</span><span class="hl-5">isAuthenticated</span><span class="hl-1">(),</span><br/><span class="hl-1"> </span><span class="hl-5">prefetch</span><span class="hl-2">:</span><span class="hl-1"> </span><span class="hl-4">async</span><span class="hl-1"> () </span><span class="hl-4">=></span><span class="hl-1"> </span><span class="hl-0">await</span><span class="hl-1"> </span><span class="hl-2">ioc</span><span class="hl-1">.</span><span class="hl-2">apiService</span><span class="hl-1">.</span><span class="hl-5">prefetch</span><span class="hl-1">(),</span><br/><span class="hl-1"> </span><span class="hl-5">unload</span><span class="hl-2">:</span><span class="hl-1"> </span><span class="hl-4">async</span><span class="hl-1"> () </span><span class="hl-4">=></span><span class="hl-1"> </span><span class="hl-0">await</span><span class="hl-1"> </span><span class="hl-2">ioc</span><span class="hl-1">.</span><span class="hl-2">apiService</span><span class="hl-1">.</span><span class="hl-5">unload</span><span class="hl-1">(),</span><br/><span class="hl-1"> </span><span class="hl-5">redirect</span><span class="hl-2">:</span><span class="hl-1"> () </span><span class="hl-4">=></span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-0">if</span><span class="hl-1"> (!</span><span class="hl-2">ioc</span><span class="hl-1">.</span><span class="hl-2">authService</span><span class="hl-1">.</span><span class="hl-5">hasRole</span><span class="hl-1">(</span><span class="hl-3">"user"</span><span class="hl-1">)) {</span><br/><span class="hl-1"> </span><span class="hl-0">return</span><span class="hl-1"> </span><span class="hl-3">"/login"</span><span class="hl-1">;</span><br/><span class="hl-1"> }</span><br/><span class="hl-1"> </span><span class="hl-0">return</span><span class="hl-1"> </span><span class="hl-4">null</span><span class="hl-1">;</span><br/><span class="hl-1"> },</span><br/><span class="hl-1"> },</span><br/><span class="hl-1">];</span><br/><br/><span class="hl-0">export</span><span class="hl-1"> </span><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-5">App</span><span class="hl-1"> = () </span><span class="hl-4">=></span><span class="hl-1"> (</span><br/><span class="hl-1"> </span><span class="hl-6"><</span><span class="hl-7">Switch</span><span class="hl-1"> </span><span class="hl-8">history</span><span class="hl-1">=</span><span class="hl-4">{</span><span class="hl-2">history</span><span class="hl-4">}</span><span class="hl-1"> </span><span class="hl-8">items</span><span class="hl-1">=</span><span class="hl-4">{</span><span class="hl-2">routes</span><span class="hl-4">}</span><span class="hl-1"> </span><span class="hl-6">/></span><br/><span class="hl-1">);</span> |
| </code><button type="button">Copy</button></pre> |
|
|
| <blockquote> |
| <p><strong>Tip:</strong> You can also call <code>serviceManager.prefetch()</code> and <code>serviceManager.unload()</code> manually if you use a different router. They iterate all registered services and call their <code>prefetch</code> / <code>unload</code> methods in dependency-resolution order.</p> |
| </blockquote> |
| <a id="full-example-separating-api-calls-from-components" class="tsd-anchor"></a><h2 class="tsd-anchor-link">Full example: separating API calls from components<a href="#full-example-separating-api-calls-from-components" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h2><p><strong>1. Define the service</strong></p> |
| <pre><code class="typescript"><span class="hl-17">// services/ContactService.ts</span><br/><span class="hl-0">import</span><span class="hl-1"> { </span><span class="hl-2">IService</span><span class="hl-1"> } </span><span class="hl-0">from</span><span class="hl-1"> </span><span class="hl-3">"react-declarative"</span><span class="hl-1">;</span><br/><br/><span class="hl-0">export</span><span class="hl-1"> </span><span class="hl-4">interface</span><span class="hl-1"> </span><span class="hl-7">IContact</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-2">id</span><span class="hl-1">: </span><span class="hl-7">string</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-2">name</span><span class="hl-1">: </span><span class="hl-7">string</span><span class="hl-1">;</span><br/><span class="hl-1"> </span><span class="hl-2">email</span><span class="hl-1">: </span><span class="hl-7">string</span><span class="hl-1">;</span><br/><span class="hl-1">}</span><br/><br/><span class="hl-0">export</span><span class="hl-1"> </span><span class="hl-4">class</span><span class="hl-1"> </span><span class="hl-7">ContactService</span><span class="hl-1"> </span><span class="hl-4">implements</span><span class="hl-1"> </span><span class="hl-7">IService</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-4">private</span><span class="hl-1"> </span><span class="hl-2">cache</span><span class="hl-1">: </span><span class="hl-7">IContact</span><span class="hl-1">[] = [];</span><br/><br/><span class="hl-1"> </span><span class="hl-4">async</span><span class="hl-1"> </span><span class="hl-5">findAll</span><span class="hl-1">(): </span><span class="hl-7">Promise</span><span class="hl-1"><</span><span class="hl-7">IContact</span><span class="hl-1">[]> {</span><br/><span class="hl-1"> </span><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-10">res</span><span class="hl-1"> = </span><span class="hl-0">await</span><span class="hl-1"> </span><span class="hl-5">fetch</span><span class="hl-1">(</span><span class="hl-3">"/api/v1/contacts"</span><span class="hl-1">);</span><br/><span class="hl-1"> </span><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">cache</span><span class="hl-1"> = </span><span class="hl-0">await</span><span class="hl-1"> </span><span class="hl-2">res</span><span class="hl-1">.</span><span class="hl-5">json</span><span class="hl-1">();</span><br/><span class="hl-1"> </span><span class="hl-0">return</span><span class="hl-1"> </span><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">cache</span><span class="hl-1">;</span><br/><span class="hl-1"> }</span><br/><br/><span class="hl-1"> </span><span class="hl-4">async</span><span class="hl-1"> </span><span class="hl-5">findById</span><span class="hl-1">(</span><span class="hl-2">id</span><span class="hl-1">: </span><span class="hl-7">string</span><span class="hl-1">): </span><span class="hl-7">Promise</span><span class="hl-1"><</span><span class="hl-7">IContact</span><span class="hl-1"> | </span><span class="hl-7">undefined</span><span class="hl-1">> {</span><br/><span class="hl-1"> </span><span class="hl-0">return</span><span class="hl-1"> </span><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">cache</span><span class="hl-1">.</span><span class="hl-5">find</span><span class="hl-1">((</span><span class="hl-2">c</span><span class="hl-1">) </span><span class="hl-4">=></span><span class="hl-1"> </span><span class="hl-2">c</span><span class="hl-1">.</span><span class="hl-2">id</span><span class="hl-1"> === </span><span class="hl-2">id</span><span class="hl-1">);</span><br/><span class="hl-1"> }</span><br/><br/><span class="hl-1"> </span><span class="hl-4">async</span><span class="hl-1"> </span><span class="hl-5">prefetch</span><span class="hl-1">() {</span><br/><span class="hl-1"> </span><span class="hl-0">await</span><span class="hl-1"> </span><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-5">findAll</span><span class="hl-1">();</span><br/><span class="hl-1"> }</span><br/><br/><span class="hl-1"> </span><span class="hl-4">async</span><span class="hl-1"> </span><span class="hl-5">unload</span><span class="hl-1">() {</span><br/><span class="hl-1"> </span><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">cache</span><span class="hl-1"> = [];</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">}</span> |
| </code><button type="button">Copy</button></pre> |
|
|
| <p><strong>2. Register and export</strong></p> |
| <pre><code class="typescript"><span class="hl-17">// ioc/config.ts</span><br/><span class="hl-0">import</span><span class="hl-1"> { </span><span class="hl-2">provide</span><span class="hl-1"> } </span><span class="hl-0">from</span><span class="hl-1"> </span><span class="hl-3">"react-declarative"</span><span class="hl-1">;</span><br/><span class="hl-0">import</span><span class="hl-1"> { </span><span class="hl-2">ContactService</span><span class="hl-1"> } </span><span class="hl-0">from</span><span class="hl-1"> </span><span class="hl-3">"../services/ContactService"</span><span class="hl-1">;</span><br/><br/><span class="hl-0">export</span><span class="hl-1"> </span><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-10">TYPES</span><span class="hl-1"> = {</span><br/><span class="hl-1"> </span><span class="hl-2">contactService:</span><span class="hl-1"> </span><span class="hl-5">Symbol</span><span class="hl-1">(</span><span class="hl-3">"contactService"</span><span class="hl-1">),</span><br/><span class="hl-1">};</span><br/><br/><span class="hl-5">provide</span><span class="hl-1">(</span><span class="hl-10">TYPES</span><span class="hl-1">.</span><span class="hl-2">contactService</span><span class="hl-1">, () </span><span class="hl-4">=></span><span class="hl-1"> </span><span class="hl-4">new</span><span class="hl-1"> </span><span class="hl-5">ContactService</span><span class="hl-1">());</span><br/><br/><span class="hl-17">// ioc/ioc.ts</span><br/><span class="hl-0">import</span><span class="hl-1"> { </span><span class="hl-2">inject</span><span class="hl-1"> } </span><span class="hl-0">from</span><span class="hl-1"> </span><span class="hl-3">"react-declarative"</span><span class="hl-1">;</span><br/><span class="hl-0">import</span><span class="hl-1"> { </span><span class="hl-2">TYPES</span><span class="hl-1"> } </span><span class="hl-0">from</span><span class="hl-1"> </span><span class="hl-3">"./config"</span><span class="hl-1">;</span><br/><span class="hl-0">import</span><span class="hl-1"> </span><span class="hl-0">type</span><span class="hl-1"> { </span><span class="hl-2">ContactService</span><span class="hl-1"> } </span><span class="hl-0">from</span><span class="hl-1"> </span><span class="hl-3">"../services/ContactService"</span><span class="hl-1">;</span><br/><br/><span class="hl-0">export</span><span class="hl-1"> </span><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-10">ioc</span><span class="hl-1"> = {</span><br/><span class="hl-1"> </span><span class="hl-2">contactService:</span><span class="hl-1"> </span><span class="hl-5">inject</span><span class="hl-1"><</span><span class="hl-7">ContactService</span><span class="hl-1">>(</span><span class="hl-10">TYPES</span><span class="hl-1">.</span><span class="hl-2">contactService</span><span class="hl-1">),</span><br/><span class="hl-1">};</span> |
| </code><button type="button">Copy</button></pre> |
|
|
| <p><strong>3. Use in a component</strong></p> |
| <p>The component has no knowledge of fetch URLs or caching—that lives entirely in the service layer.</p> |
| <pre><code class="tsx"><span class="hl-17">// components/ContactList.tsx</span><br/><span class="hl-0">import</span><span class="hl-1"> { </span><span class="hl-2">ioc</span><span class="hl-1"> } </span><span class="hl-0">from</span><span class="hl-1"> </span><span class="hl-3">"../ioc/ioc"</span><span class="hl-1">;</span><br/><br/><span class="hl-0">export</span><span class="hl-1"> </span><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-5">ContactList</span><span class="hl-1"> = () </span><span class="hl-4">=></span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-4">const</span><span class="hl-1"> [</span><span class="hl-10">contacts</span><span class="hl-1">, </span><span class="hl-10">setContacts</span><span class="hl-1">] = </span><span class="hl-5">useState</span><span class="hl-1">([]);</span><br/><br/><span class="hl-1"> </span><span class="hl-5">useEffect</span><span class="hl-1">(() </span><span class="hl-4">=></span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-2">ioc</span><span class="hl-1">.</span><span class="hl-2">contactService</span><span class="hl-1">.</span><span class="hl-5">findAll</span><span class="hl-1">().</span><span class="hl-5">then</span><span class="hl-1">(</span><span class="hl-2">setContacts</span><span class="hl-1">);</span><br/><span class="hl-1"> }, []);</span><br/><br/><span class="hl-1"> </span><span class="hl-0">return</span><span class="hl-1"> (</span><br/><span class="hl-1"> </span><span class="hl-6"><</span><span class="hl-18">ul</span><span class="hl-6">></span><br/><span class="hl-1"> </span><span class="hl-4">{</span><span class="hl-2">contacts</span><span class="hl-9">.</span><span class="hl-5">map</span><span class="hl-9">((</span><span class="hl-2">c</span><span class="hl-9">) </span><span class="hl-4">=></span><span class="hl-9"> (</span><br/><span class="hl-9"> </span><span class="hl-6"><</span><span class="hl-18">li</span><span class="hl-9"> </span><span class="hl-8">key</span><span class="hl-1">=</span><span class="hl-4">{</span><span class="hl-2">c</span><span class="hl-9">.</span><span class="hl-2">id</span><span class="hl-4">}</span><span class="hl-6">></span><span class="hl-4">{</span><span class="hl-2">c</span><span class="hl-9">.</span><span class="hl-2">name</span><span class="hl-4">}</span><span class="hl-9"> — </span><span class="hl-4">{</span><span class="hl-2">c</span><span class="hl-9">.</span><span class="hl-2">email</span><span class="hl-4">}</span><span class="hl-6"></</span><span class="hl-18">li</span><span class="hl-6">></span><br/><span class="hl-9"> ))</span><span class="hl-4">}</span><br/><span class="hl-1"> </span><span class="hl-6"></</span><span class="hl-18">ul</span><span class="hl-6">></span><br/><span class="hl-1"> );</span><br/><span class="hl-1">};</span> |
| </code><button type="button">Copy</button></pre> |
|
|
| <blockquote> |
| <p><strong>Warning:</strong> Avoid calling <code>serviceManager.clear()</code> in production unless you intend to tear down every registered service—it resets the entire container including all singletons.</p> |
| </blockquote> |
| </div></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-accordion"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><span class="settings-label">Member Visibility</span><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></div><div class="tsd-theme-toggle"><label class="settings-label" for="tsd-theme">Theme</label><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div><details open class="tsd-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>On This Page</h3></summary><div class="tsd-accordion-details"><a href="#dependency-injection-with-provide-and-inject"><span>Dependency injection with provide and inject</span></a><ul><li><a href="#core-api"><span>Core API</span></a></li><li><a href="#defining-a-service-class"><span>Defining a service class</span></a></li><li><a href="#registering-services"><span>Registering services</span></a></li><li><a href="#injecting-services-into-components-and-hooks"><span>Injecting services into components and hooks</span></a></li><li><a href="#scoped-containers-with-createservicemanager"><span>Scoped containers with create<wbr/>Service<wbr/>Manager</span></a></li><li><a href="#route-level-lifecycle-hooks"><span>Route-<wbr/>level lifecycle hooks</span></a></li><li><a href="#full-example-separating-api-calls-from-components"><span>Full example: separating API calls from components</span></a></li></ul></div></details></div><div class="site-menu"><nav class="tsd-navigation"><a href="../modules.html">react-declarative</a><ul class="tsd-small-nested-navigation" id="tsd-nav-container"><li>Loading...</li></ul></nav></div></div></div><footer><p class="tsd-generator">Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></footer><div class="overlay"></div></body></html> |
|
|
