Skip to content

Commit dad0853

Browse files
docs(signals): update FAQ page according to latest changes (#4791)
1 parent 8314ddb commit dad0853

File tree

1 file changed

+17
-18
lines changed
  • projects/ngrx.io/content/guide/signals

1 file changed

+17
-18
lines changed

projects/ngrx.io/content/guide/signals/faq.md

Lines changed: 17 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,28 @@
1+
# Frequently Asked Questions
2+
13
<details>
2-
<summary>How to connect my SignalStore(s) with Redux DevTools?</summary>
4+
<summary><b>#1</b> How to connect my SignalStore(s) with Redux DevTools?</summary>
35

46
There's no official connection between `@ngrx/signals` and the Redux Devtools.
57
We expect the Angular Devtools will provide support for signals soon, which can be used to track the state.
68
However, you could create a feature for this, or you can make use of the [`withDevtools` feature](https://github.com/angular-architects/ngrx-toolkit?tab=readme-ov-file#devtools-withdevtools) from the `@angular-architects/ngrx-toolkit` package.
79
</details>
810

911
<details>
10-
<summary>Can I interact with my NgRx Actions within a SignalStore?</summary>
12+
<summary><b>#2</b> Can I use the Flux/Redux pattern with SignalStore?</summary>
1113

12-
Signals are not meant to have a concept of time. Also, the effect is somewhat tied to Angular change detection, so you can't observe every action that would be dispatched over time through some sort of Signal API.
13-
The global NgRx Store is still the best mechanism to dispatch action(s) over time and react to them across multiple features.
14+
Yes. Starting from NgRx version 19.2, the Events plugin introduces support for a Flux-style state management with SignalStore.
15+
It enables defining and dispatching events, handling them through reducers and effects, and maintaining a unidirectional data flow similar to the traditional Redux pattern.
16+
For more information, see the Events Plugin documentation.
1417
</details>
1518

1619
<details>
17-
<summary>Can I use the Redux pattern (reducers) to build my state?</summary>
18-
19-
Just like `@ngrx/component-store`, there is no indirection between events and how it affects the state. To update the SignalStore's state use the `patchState` function.
20-
However, SignalStore is extensible and you can build your own custom feature that uses the Redux pattern.
21-
</details>
20+
<summary><b>#3</b> Can I define my SignalStore as a class?</summary>
2221

23-
<details>
24-
<summary>Can I define my SignalStore as a class?</summary>
22+
Yes, it is possible to define a SignalStore using a class-based approach.
23+
However, the NgRx team recommends using the functional style for defining SignalStores.
2524

26-
To create a class-based SignalStore, create a new class and extend from `signalStore`.
25+
To define a class-based SignalStore, create a new class and extend from `signalStore`.
2726

2827
```ts
2928
@Injectable()
@@ -41,7 +40,7 @@ export class CounterStore extends signalStore(
4140
</details>
4241

4342
<details>
44-
<summary>How can I get the type of a SignalStore?</summary>
43+
<summary><b>#4</b> How can I get the type of a SignalStore?</summary>
4544

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

@@ -57,21 +56,21 @@ function logCount(store: CounterStore): void {
5756
</details>
5857

5958
<details>
60-
<summary>Can I inject a SignalStore via the constructor?</summary>
59+
<summary><b>#5</b> Can I inject a SignalStore via the constructor?</summary>
6160

62-
To inject a SignalStore via the constructor, define and export its type with the same name.
61+
Yes. To inject a SignalStore via the constructor, define and export its type with the same name.
6362

6463
```ts
65-
// counter.store.ts
64+
// counter-store.ts
6665
export const CounterStore = signalStore(withState({ count: 0 }));
6766

6867
export type CounterStore = InstanceType<typeof CounterStore>;
6968

70-
// counter.component.ts
69+
// counter.ts
7170
import { CounterStore } from './counter.store';
7271

7372
@Component({ /* ... */ })
74-
export class CounterComponent {
73+
export class Counter {
7574
constructor(readonly store: CounterStore) {}
7675
}
7776
```

0 commit comments

Comments
 (0)