Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/adamcsk1/ngx-simple-signal-store
A simple way to create signal stores with a read-only interface.
https://github.com/adamcsk1/ngx-simple-signal-store
angular
Last synced: 21 days ago
JSON representation
A simple way to create signal stores with a read-only interface.
- Host: GitHub
- URL: https://github.com/adamcsk1/ngx-simple-signal-store
- Owner: adamcsk1
- License: mit
- Created: 2024-07-06T14:29:39.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2024-11-26T17:01:08.000Z (about 1 month ago)
- Last Synced: 2024-11-26T17:36:56.536Z (about 1 month ago)
- Topics: angular
- Language: TypeScript
- Homepage:
- Size: 365 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# NgxSimpleSignalStore
A simple way to create signal stores with a read-only interface.
## Compatibility with Angular Versions
ngx-simple-signal-store
Angular
2.x
>= 19
1.x
>= 18
## Table of contents
- [Installation](#installation)
- [Usage](#usage)
- [Create global store](#create-global-store)
- [Create component store](#create-component-store)
- [API](#api)
## Installation
```bash
npm install ngx-simple-signal-store
# Or if you use yarn
yarn add ngx-simple-signal-store
```
## Usage
### Create global store
Add the store provider with an initial state and a unique token to your app.config.ts as a provider:
```ts
import { createInjectionToken, provideStore } from 'ngx-simple-signal-store';
export interface DemoState {
theAnswerToLife: number;
}
export const initialDemoState: DemoState = {
theAnswerToLife: 42
};
export const demoStateToken = createInjectionToken();
export const appConfig: ApplicationConfig = {
providers: [
provideStore(initialDemoState, demoStateToken),
],
};
```
Then, import and inject it into your components:
```ts
import { demoStateToken } from './app.config.ts';
@Component({})
export class DemoComponent {
readonly #demoStore = inject(demoStateToken);
}
```
### Create component store
Add the store provider with an initial state and a unique token to your component as a provider:
```ts
import { createInjectionToken, provideStore } from 'ngx-simple-signal-store';
export interface DemoComponentState {
theAnswerToEverything: number;
}
export const initialDemoComponentState: DemoComponentState = {
theAnswerToEverything: 42
};
export const demoComponentStateToken = createInjectionToken();
@Component({
providers: [provideStore(initialDemoComponentState, demoComponentStateToken)]
})
export class DemoComponent {
readonly #demoComponentStore = inject(demoComponentStateToken);
}
```
### API
**T** is the type of the state.
## state: `{ [K in keyof T]: Signal }`;
```typescript
const cookieExists: boolean = demoStore.state;
```
Return with the readonly state. The returned object keys are the referenced state keys, and the values are the read-only signals.
## setState(key: K, data: T[K]): `void`;
```typescript
demoStore.setState('key', 0);
```
Sets the state with a specified key and value.
## patchState(key: K, data: T[K] | Partial): `void`;
```typescript
// primitive:
demoStore.patchState('key', 0);
// The value before patch: 1
// The value after patch: 0
// array:
demoStore.patchState('key', [3]);
// The value before patch: [1, 2]
// The value after patch: [1, 2, 3]
// object:
demoStore.patchState('key', {value: 0});
// The value before patch: {value: 1}
// The value after patch: {value: 0}
```
Patch the state with a specified key and value.
A callback function can be used for the complex operations:
```typescript
demoStore.patchState('key', state => ({value: state.value + 1}));
```
## resetStore(): `void`;
```typescript
demoStore.resetStore();
```
Reset the store to the initial state.