diff --git a/projects/ngrx.io/content/guide/signals/signal-store/index.md b/projects/ngrx.io/content/guide/signals/signal-store/index.md index 2f1c15e042..b25db24149 100644 --- a/projects/ngrx.io/content/guide/signals/signal-store/index.md +++ b/projects/ngrx.io/content/guide/signals/signal-store/index.md @@ -285,6 +285,38 @@ export const BooksStore = signalStore( +
+ +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, either: + +(A) Create another `withComputed` feature or `withMethods` feature, or + +(B) Break out the common piece with a helper `const`. + +```ts +export const BooksStore = signalStore( + withState(initialState), + // 👇 Accessing previously defined state signals and properties. + withComputed(({ books, filter }) => ({ + booksCount: computed(() => books().length), + sortDirection: computed(() => filter.order() === 'asc' ? 1 : -1), + })), + // 👇 (A) Also access previously defined computed properties (or functions). + withComputed(({ books, sortDirection }) => { + // 👇 (B) Define helper functions (or computeds). + const sortBooks = (direction: number) => + books().toSorted((a, b) => direction * a.title.localeCompare(b.title)); + + return { + sortedBooks: computed(() => sortBooks(sortDirection())), + reversedBooks: computed(() => sortBooks(-1 * sortDirection())), + }; + }), +); +``` +
+ ### Reactive Store Methods In more complex scenarios, opting for RxJS to handle asynchronous side effects is advisable.