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
1 change: 1 addition & 0 deletions docs/docs/extensions.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ It offers extensions like:
- [Immutable State Protection](./with-immutable-state): Protects the state from being mutated outside or inside the Store.
- [~Redux~](./with-redux): Possibility to use the Redux Pattern. Deprecated in favor of NgRx's `@ngrx/signals/events` starting in 19.2
- [Resource](./with-resource): Integrates Angular's Resource into SignalStore for async data operations
- [Mutations](./mutations): Seek to offer an appropriate equivalent to signal resources for sending data back to the backend
- [Reset](./with-reset): Adds a `resetState` method to your store
- [Call State](./with-call-state): Add call state management to your signal stores
- [Storage Sync](./with-storage-sync): Synchronizes the Store with Web Storage
Expand Down
35 changes: 32 additions & 3 deletions docs/docs/mutations.md
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,37 @@ This guide covers
- Both mutations in a `withMutations()`
- Standalone functions in a component

```ts
withMutations((store) => ({
increment: rxMutation({
operation: (params: Params) => {
return calcSum(store.counter(), params.value);
},
onSuccess: (result) => {
// ...
},
onError: (error) => {
// ...
},
}),
saveToServer: httpMutation({
request: (_: void) => ({
url: `https://httpbin.org/post`,
method: 'POST',
body: { counter: store.counter() },
}),
parse: (response) => response as CounterResponse,
onSuccess: (response) => {
console.log('Counter sent to server:', response);
patchState(store, { lastResponse: response.json });
},
onError: (error) => {
console.error('Failed to send counter:', error);
},
}),
})),
```

But before going into depth of the "How" and "When" to use mutations, it is important to give context about
the "Why" and "Who" of why mutations were built for the toolkit like this.

Expand Down Expand Up @@ -170,7 +201,7 @@ const save = await store.save({...}); if (inc.status === 'error')
### Signal values

```ts
// 5. Enables the following signal states
// Signals

// via store
store.increment.value; // also status/error/isPending/status/hasValue;
Expand Down Expand Up @@ -350,8 +381,6 @@ For brevity, take `rx` as `rxMutation` and `http` for `httpMutation`
- `rx`'s `operation` is a function that defines the mutation logic. It returns an `Observable`,
- `http` takes parts of `HttpClient`'s method signature, or a `request` object which accepts those parts

<!-- TODO - I was wrong on flattening part, re-write -->

## Full example

Our example application in the repository has more details and implementations, but here is a full example in a store using `withMutations`.
Expand Down