Skip to content
Merged
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
35 changes: 17 additions & 18 deletions projects/ngrx.io/content/guide/signals/faq.md
Original file line number Diff line number Diff line change
@@ -1,29 +1,28 @@
# 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.
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.
</details>

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

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.
The global NgRx Store is still the best mechanism to dispatch action(s) over time and react to them across multiple features.
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.
For more information, see the Events Plugin documentation.
</details>

<details>
<summary>Can I use the Redux pattern (reducers) to build my state?</summary>

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.
However, SignalStore is extensible and you can build your own custom feature that uses the Redux pattern.
</details>
<summary><b>#3</b> Can I define my SignalStore as a class?</summary>

<details>
<summary>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.

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

```ts
@Injectable()
@@ -41,7 +40,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.

@@ -57,21 +56,21 @@ 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>

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

```ts
// counter.store.ts
// counter-store.ts
export const CounterStore = signalStore(withState({ count: 0 }));

export type CounterStore = InstanceType<typeof CounterStore>;

// counter.component.ts
// counter.ts
import { CounterStore } from './counter.store';

@Component({ /* ... */ })
export class CounterComponent {
export class Counter {
constructor(readonly store: CounterStore) {}
}
```