Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 26 additions & 0 deletions projects/ngrx.io/content/guide/signals/faq.md
Original file line number Diff line number Diff line change
Expand Up @@ -75,3 +75,29 @@ export class Counter {
}
```
</details>

<details>
<summary><b>#6</b> Can features like `withComputed` or `withMethods` reference other members inside the same feature?</summary>

It may be necessary for a computed in a `withComputed` feature to need to reference another computed value,
or a method in a `withMethods` feature to refer to another method. To do so, you can break out the common piece
with a helper that can serve as a function or computed itself.

Although it is possible to have multiple features that reference each other, we recommend having everything in one call.
That adheres more to JavaScript's functional style and keeps features co-located.

```ts
export const BooksStore = signalStore(
withState(initialState),
withComputed(({ filter }) => {
// 👇 Define helper functions (or computed signals).
const sortDirection = computed(() => (filter.order() === 'asc' ? 1 : -1));

return {
sortDirection,
sortDirectionReversed: () => sortDirection() * -1,
};
})
);
```
</details>
39 changes: 34 additions & 5 deletions projects/www/src/app/pages/guide/signals/faq.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
# Frequently Asked Questions

<details>
<summary>How to connect my SignalStore(s) with Redux DevTools?</summary>
<summary><b>#1</b> How to connect my SignalStore(s) with Redux DevTools?</summary>

There's no official connection between `@ngrx/signals` and the Redux Devtools.
We expect the Angular Devtools will provide support for signals soon, which can be used to track the state.
Expand All @@ -10,7 +10,7 @@ However, you could create a feature for this, or you can make use of the [`withD
</details>

<details>
<summary>Can I use the Flux/Redux pattern with SignalStore?</summary>
<summary><b>#2</b> Can I use the Flux/Redux pattern with SignalStore?</summary>

Yes. Starting from NgRx version 19.2, the Events plugin introduces support for a Flux-style state management with SignalStore.
It enables defining and dispatching events, handling them through reducers and effects, and maintaining a unidirectional data flow similar to the traditional Redux pattern.
Expand All @@ -19,7 +19,7 @@ For more information, see the Events Plugin documentation.
</details>

<details>
<summary>Can I define my SignalStore as a class?</summary>
<summary><b>#3</b> Can I define my SignalStore as a class?</summary>

Yes, it is possible to define a SignalStore using a class-based approach.
However, the NgRx team recommends using the functional style for defining SignalStores.
Expand All @@ -43,7 +43,7 @@ export class CounterStore extends signalStore(
</details>

<details>
<summary>How can I get the type of a SignalStore?</summary>
<summary><b>#4</b> How can I get the type of a SignalStore?</summary>

To get the type of a SignalStore, use the `InstanceType` utility type.

Expand All @@ -60,7 +60,7 @@ function logCount(store: CounterStore): void {
</details>

<details>
<summary>Can I inject a SignalStore via the constructor?</summary>
<summary><b>#5</b> Can I inject a SignalStore via the constructor?</summary>

Yes. To inject a SignalStore via the constructor, define and export its type with the same name.

Expand All @@ -82,3 +82,32 @@ export class Counter {
```

</details>

<details>
<summary><b>#6</b> Can features like `withComputed` or `withMethods` reference other members inside the same feature?</summary>

It may be necessary for a computed in a `withComputed` feature to need to reference another computed value,
or a method in a `withMethods` feature to refer to another method. To do so, you can break out the common piece
with a helper that can serve as a function or computed itself.

Although it is possible to have multiple features that reference each other, we recommend having everything in one call.
That adheres more to JavaScript's functional style and keeps features co-located.

```ts
export const BooksStore = signalStore(
withState(initialState),
withComputed(({ filter }) => {
// 👇 Define helper functions (or computed signals).
const sortDirection = computed(() =>
filter.order() === 'asc' ? 1 : -1
);

return {
sortDirection,
sortDirectionReversed: () => sortDirection() * -1,
};
})
);
```

</details>