|
| 1 | +--- |
| 2 | +title: withFeatureFactory() |
| 3 | +--- |
| 4 | + |
| 5 | +The `withFeatureFactory()` function allows passing properties, methods, or signals from a SignalStore to a feature. It is an advanced feature, primarily targeted for library authors for SignalStore features. |
| 6 | + |
| 7 | +Its usage is very simple. It is a function which gets the current store: |
| 8 | + |
| 9 | +```typescript |
| 10 | +function withSum(a: Signal<number>, b: Signal<number>) { |
| 11 | + return signalStoreFeature( |
| 12 | + withComputed(() => ({ |
| 13 | + sum: computed(() => a() + b()), |
| 14 | + })) |
| 15 | + ); |
| 16 | +} |
| 17 | + |
| 18 | +signalStore( |
| 19 | + withState({ a: 1, b: 2 }), |
| 20 | + withFeatureFactory((store) => withSum(store.a, store.b)) |
| 21 | +); |
| 22 | +``` |
| 23 | + |
| 24 | +## Use Case 1: Mismatching Input Constraints |
| 25 | + |
| 26 | +`signalStoreFeature` can define input constraints that must be fulfilled by the SignalStore calling the feature. For example, a method `load` needs to be present to fetch data. The default implementation would be: |
| 27 | + |
| 28 | +```typescript |
| 29 | +import { signalStoreFeature } from '@ngrx/signals'; |
| 30 | + |
| 31 | +type Entity = { |
| 32 | + id: number; |
| 33 | + name: string; |
| 34 | +}; |
| 35 | + |
| 36 | +function withEntityLoader() { |
| 37 | + return signalStoreFeature( |
| 38 | + type<{ |
| 39 | + methods: { |
| 40 | + load: (id: number) => Promise<Entity>; |
| 41 | + }; |
| 42 | + }>(), |
| 43 | + withState({ |
| 44 | + entity: undefined as Entity | undefined, |
| 45 | + }), |
| 46 | + withMethods((store) => ({ |
| 47 | + async setEntityId(id: number) { |
| 48 | + const entity = await store.load(id); |
| 49 | + patchState(store, { entity }); |
| 50 | + }, |
| 51 | + })) |
| 52 | + ); |
| 53 | +} |
| 54 | +``` |
| 55 | + |
| 56 | +The usage of `withEntityLoader` would be: |
| 57 | + |
| 58 | +```typescript |
| 59 | +signalStore( |
| 60 | + withMethods((store) => ({ |
| 61 | + load(id: number): Promise<Entity> { |
| 62 | + // some dummy implementation |
| 63 | + return Promise.resolve({ id, name: 'John' }); |
| 64 | + }, |
| 65 | + })), |
| 66 | + withEntityLoader() |
| 67 | +); |
| 68 | +``` |
| 69 | + |
| 70 | +A common issue with generic features is that the input constraints are not fulfilled exactly. If the existing `load` method would return an `Observable<Entity>`, we would have to rename that one and come up with a `load` returning `Promise<Entitiy>`. Renaming an existing method might not always be an option. Beyond that, what if two different features require a `load` method with different return types? |
| 71 | + |
| 72 | +Another aspect is that we probably want to encapsulate the load method since it is an internal one. The current options don't allow that, unless the `withEntityLoader` explicitly defines a `_load` method. |
| 73 | + |
| 74 | +For example: |
| 75 | + |
| 76 | +```typescript |
| 77 | +signalStore( |
| 78 | + withMethods((store) => ({ |
| 79 | + load(id: number): Observable<Entity> { |
| 80 | + return of({ id, name: 'John' }); |
| 81 | + }, |
| 82 | + })), |
| 83 | + withEntityLoader() |
| 84 | +); |
| 85 | +``` |
| 86 | + |
| 87 | +`withFeatureFactory` solves those issues by mapping the existing method to whatever `withEntityLoader` requires. `withEntityLoader` needs to move the `load` method dependency to an argument of the function: |
| 88 | + |
| 89 | +```typescript |
| 90 | +function withEntityLoader(load: (id: number) => Promise<Entity>) { |
| 91 | + return signalStoreFeature( |
| 92 | + withState({ |
| 93 | + entity: undefined as Entity | undefined, |
| 94 | + }), |
| 95 | + withMethods((store) => ({ |
| 96 | + async setEntityId(id: number) { |
| 97 | + const entity = await load(id); |
| 98 | + patchState(store, { entity }); |
| 99 | + }, |
| 100 | + })) |
| 101 | + ); |
| 102 | +} |
| 103 | +``` |
| 104 | + |
| 105 | +`withFeatureFactory` can now map the existing `load` method to the required one. |
| 106 | + |
| 107 | +```typescript |
| 108 | +const store = signalStore( |
| 109 | + withMethods((store) => ({ |
| 110 | + load(id: number): Observable<Entity> { |
| 111 | + // some dummy implementation |
| 112 | + return of({ id, name: 'John' }); |
| 113 | + }, |
| 114 | + })), |
| 115 | + withFeatureFactory((store) => withEntityLoader((id) => firstValueFrom(store.load(id)))) |
| 116 | +); |
| 117 | +``` |
| 118 | + |
| 119 | +## Use Case 2: Generic features with Input Constraints |
| 120 | + |
| 121 | +Another potential issue with advanced features in a SignalStore is that multiple |
| 122 | +features with input constraints cannot use generic types. |
| 123 | + |
| 124 | +For example, `withEntityLoader` is a generic feature that allows the caller to |
| 125 | +define the entity type. Alongside `withEntityLoader`, there's another feature, |
| 126 | +`withOptionalState`, which has input constraints as well. |
| 127 | + |
| 128 | +Due to [certain TypeScript limitations](https://ngrx.io/guide/signals/signal-store/custom-store-features#known-typescript-issues), |
| 129 | +the following code will not compile: |
| 130 | + |
| 131 | +```ts |
| 132 | +function withEntityLoader<T>() { |
| 133 | + return signalStoreFeature( |
| 134 | + type<{ |
| 135 | + methods: { |
| 136 | + load: (id: number) => Promise<T>; |
| 137 | + }; |
| 138 | + }>(), |
| 139 | + withState({ |
| 140 | + entity: undefined as T | undefined, |
| 141 | + }), |
| 142 | + withMethods((store) => ({ |
| 143 | + async setEntityId(id: number) { |
| 144 | + const entity = await store.load(id); |
| 145 | + patchState(store, { entity }); |
| 146 | + }, |
| 147 | + })) |
| 148 | + ); |
| 149 | +} |
| 150 | + |
| 151 | +function withOptionalState<T>() { |
| 152 | + return signalStoreFeature( |
| 153 | + type<{ methods: { foo: () => string } }>(), |
| 154 | + withState({ |
| 155 | + state: undefined as T | undefined, |
| 156 | + }) |
| 157 | + ); |
| 158 | +} |
| 159 | + |
| 160 | +signalStore( |
| 161 | + withMethods((store) => ({ |
| 162 | + foo: () => 'bar', |
| 163 | + load(id: number): Promise<Entity> { |
| 164 | + // some dummy implementation |
| 165 | + return Promise.resolve({ id, name: 'John' }); |
| 166 | + }, |
| 167 | + })), |
| 168 | + withOptionalState<Entity>(), |
| 169 | + withEntityLoader<Entity>() |
| 170 | +); |
| 171 | +``` |
| 172 | + |
| 173 | +Again, `withFeatureFactory` can solve this issue by replacing the input constraint with a function parameter: |
| 174 | + |
| 175 | +```ts |
| 176 | +function withEntityLoader<T>(loader: (id: number) => Promise<T>) { |
| 177 | + return signalStoreFeature( |
| 178 | + withState({ |
| 179 | + entity: undefined as T | undefined, |
| 180 | + }), |
| 181 | + withMethods((store) => ({ |
| 182 | + async setEntityId(id: number) { |
| 183 | + const entity = await loader(id); |
| 184 | + patchState(store, { entity }); |
| 185 | + }, |
| 186 | + })) |
| 187 | + ); |
| 188 | +} |
| 189 | + |
| 190 | +function withOptionalState<T>(foo: () => string) { |
| 191 | + return signalStoreFeature( |
| 192 | + withState({ |
| 193 | + state: undefined as T | undefined, |
| 194 | + }) |
| 195 | + ); |
| 196 | +} |
| 197 | + |
| 198 | +signalStore( |
| 199 | + withMethods((store) => ({ |
| 200 | + foo: () => 'bar', |
| 201 | + load(id: number): Promise<Entity> { |
| 202 | + // some dummy implementation |
| 203 | + return Promise.resolve({ id, name: 'John' }); |
| 204 | + }, |
| 205 | + })), |
| 206 | + withFeatureFactory((store) => withOptionalState<Entity>(store.foo.bind(store))), |
| 207 | + withFeatureFactory((store) => withEntityLoader<Entity>(store.load.bind(store))) |
| 208 | +); |
| 209 | +``` |
0 commit comments