### Installing ngx-signal-flow with npm

Source: https://github.com/danseid/ngx-signal-flow/blob/main/README.md

Use the npm package manager to install ngx-signal-flow in your Angular project.

```Bash
npm install ngx-signal-flow
```

--------------------------------

### Creating ngx-signal-flow Store Instance

Source: https://github.com/danseid/ngx-signal-flow/blob/main/README.md

Initialize a new store instance using the createStore function, providing the initial state as an argument.

```TypeScript
import { createStore } from "ngx-signal-flow";

const store = createStore<State>({ count: 0 });
```

--------------------------------

### Creating ngx-signal-flow Store Class

Source: https://github.com/danseid/ngx-signal-flow/blob/main/README.md

Create an Angular service to encapsulate the store, defining sources for actions, selectors for state access, and reducers for state mutations.

```TypeScript
import { Injectable } from '@angular/core';
import { createStore } from "ngx-signal-flow";

@Injectable({
   providedIn: 'root'
})
export class AppStore {
   private readonly store = createStore<AppState>({ count: 0 });

   // SOURCES
   readonly increment = this.store.source<number>();
   readonly decrement = this.store.source<number>();

   // SELECTORS
   readonly count = this.store.select('count');

   constructor() {
      // REDUCERS
      this.increment.reduce((draft: AppState, value: number) => {
         draft.count += value;
      });

      this.decrement.reduce((draft: AppState, value: number) => {
         draft.count -= value;
      });
   }
}
```

--------------------------------

### Creating Sources in ngx-signal-flow (TypeScript)

Source: https://github.com/danseid/ngx-signal-flow/blob/main/README.md

Sources are signals that emit values to the store. Create a source using `store.source()`, optionally providing an initial value. Emit a new value by calling the source function with the desired value as an argument.

```TypeScript
// no initial value
const source = store.source<number>()
// with initial value
const source = store.source(0)
// emit a value
source(1)
```

--------------------------------

### Managing State History with Undo/Redo in ngx-signal-flow (TypeScript)

Source: https://github.com/danseid/ngx-signal-flow/blob/main/README.md

Initialize the store with the `withPatches` option set to `true` to enable state history tracking. Use the `store.undo()` and `store.redo()` methods to navigate through state changes, and `store.canUndo()` and `store.canRedo()` to check if these operations are possible.

```TypeScript
const store = createStore<State>({ count: 0 }, { withPatches: true });
store.reduce((draft: State) => {
  draft.count  = draft.count + 1;
});
// store.count === 1
store.canRedo(); // false
store.canUndo(); // true
store.undo();
// store.count === 0
store.canUndo(); // false
store.canRedo(); // true
store.redo();
// store.count === 1
store.canRedo(); // false
store.canUndo(); // true
```

--------------------------------

### Selecting State with store.select

Source: https://github.com/danseid/ngx-signal-flow/blob/main/README.md

Use store.select with a state key to create an Angular signal that provides reactive access to a specific state property.

```TypeScript
const count = store.select('count');

// use
{{ count() }}
```

--------------------------------

### Using ngx-signal-flow Store in Component

Source: https://github.com/danseid/ngx-signal-flow/blob/main/README.md

Inject the store service into an Angular component and use its selectors (signals) in the template and sources (actions) via event bindings.

```TypeScript
import {Component, inject} from '@angular/core';
import {AppStore} from './app.store';


@Component({
   selector: 'app-root',
   standalone: true,
   template: `
       <button (click)="store.increment(1)">Increment</button>
       <button (click)="store.decrement(1)">Decrement</button>
       <p>Count: {{ store.count() }}</p>
   `
})
export class AppComponent {
   store = inject(AppStore);
}
```

--------------------------------

### Subscribing to ngx-signal-flow Store Changes

Source: https://github.com/danseid/ngx-signal-flow/blob/main/README.md

Access the store's state as an RxJS observable to subscribe and react to state changes.

```TypeScript
store.asObservable().subscribe((state: State) => {
  // handle state changes
});
```

--------------------------------

### Combining Multiple Sources for Effects in ngx-signal-flow (TypeScript)

Source: https://github.com/danseid/ngx-signal-flow/blob/main/README.md

Create an effect that depends on emissions from multiple sources by passing them as arguments to `store.effect()`. The effect function will receive the latest values from all specified sources whenever any of them emit.

```TypeScript
const source1 = store.source<number>(0);
const source2 = store.source<string>('');

store.effect(source1, source2, (value1, value2) => {
  return http.get(`https://api.example.com/${value1}/${value2}`);
});
```

--------------------------------

### Defining ngx-signal-flow State Type

Source: https://github.com/danseid/ngx-signal-flow/blob/main/README.md

Define the structure of your application's state using a TypeScript type or interface.

```TypeScript
type AppState = {
  count: number;
};
```

--------------------------------

### Modifying State with store.reduce

Source: https://github.com/danseid/ngx-signal-flow/blob/main/README.md

Use store.reduce with a function to directly modify the state draft, leveraging Immer for immutable updates.

```TypeScript
store.reduce((draft: State) => {
  draft.count  = draft.count + 1;
});
```

--------------------------------

### Computing Derived State with store.compute

Source: https://github.com/danseid/ngx-signal-flow/blob/main/README.md

Use store.compute to create an Angular signal that derives a value from one or more state properties using a provided computation function.

```TypeScript
const doubleCount = store.compute('count', (count: number) => count * 2);
const fullName = store.compute('firstName', 'lastName', (firstName: string, lastName: string) => `${firstName} ${lastName}`);

// use
{{ doubleCount() }}
{{ fullName() }}
```

--------------------------------

### Performing Side Effects with store.effect

Source: https://github.com/danseid/ngx-signal-flow/blob/main/README.md

Use store.effect to run a function whenever the store's state changes, suitable for side effects that don't modify the state.

```TypeScript
store.effect((state: State) => {
  console.log('State changed:', state);
});
```

--------------------------------

### Modifying State with store.reduce and Sources

Source: https://github.com/danseid/ngx-signal-flow/blob/main/README.md

Link store.reduce to one or more sources; the reducer function executes only when the specified sources emit values, modifying the state based on the source values.

```TypeScript
store.reduce(source, (draft: State, value: number) => {
   draft.count = draft.count + value;
});

store.reduce(source1, source2, (draft: State, val1: number, val2: string) => {
   draft.count = draft.count + val1;
   draft.name = val2;
});
```

--------------------------------

### Updating State from Effect Results in ngx-signal-flow (TypeScript)

Source: https://github.com/danseid/ngx-signal-flow/blob/main/README.md

Since effects are lazy, use the `effect.reduce()` method to subscribe to the effect's observable and update the store's state based on the data it emits. The reducer function receives the draft state and the data from the effect.

```TypeScript
source.effect.reduce((draft: State, data: any) => {
  // modify state based on the data received from the effect
});
```

--------------------------------

### Performing Side Effects with Source Effects in ngx-signal-flow (TypeScript)

Source: https://github.com/danseid/ngx-signal-flow/blob/main/README.md

Define side effects for a source using `source.effect()`. The effect function receives the emitted value and must return an observable, typically used for asynchronous operations like fetching data from an API. Effects are lazy and only execute when used to reduce state.

```TypeScript
source.effect((value: number) => {
  return http.get(`https://api.example.com/${value}`);
});
```

--------------------------------

### Modifying State with Source Reducers in ngx-signal-flow (TypeScript)

Source: https://github.com/danseid/ngx-signal-flow/blob/main/README.md

Attach a reducer function to a source using `source.reduce()` to modify the store's state based on emitted values. The reducer function receives the draft state and the emitted value, allowing for immutable state updates.

```TypeScript
source.reduce((draft: State, value: number) => {
  draft.count  = draft.count + value;
});
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.