NgControll

ngControl is an intuitive and easy-to-use state manager for Angular applications.
It provides a simple interface for managing application state, integrates with Redux DevTools.

Features

- Simple and intuitive API
- Integration with Redux DevTools
- Type-safe with TypeScript
- Use Signals

Installation

install the library using npm:

npm i ng-control

Why Use ngControl?

- Simplicity: ngControl offers an intuitive and simple API for managing application state.
- Modularity: ngControl is modular and can be easily extended.
- Integration with Redux DevTools: ngControl supports Redux DevTools, making state debugging easier.
- Type-safe with TypeScript: ngControl is written in TypeScript, providing type safety and better integration with the Angular ecosystem.

API

Store

Methods

- getState(): Signal: Returns a signal containing the current state.
- setState(newState: Partial, action: string = 'SET_STATE'): void: Updates the state and sends the action to Redux DevTools.
- selectOn(key: K): T[K] | null: Returns the value for the given state key.
- select(selector: (state:T) => K): K Returns the signal value.

Basic usage

Add Store to you Angular module and configure the initial state.

import {NG_CONTROL_STATE, Store} from "../state/store";

export const appConfig: ApplicationConfig = {
providers: [
provideRouter(routes),
{ provide: NG_CONTROL_STATE, useValue: { / initial state can be anything or empty Object / } },
Store
]
};

Create store interface

interface myStoreInterface {
firstName: string,
lastName: string,
}

Usage in a component

export class AppComponent implements OnInit{

public storeData: myStoreInterface;

constructor(private store: Store) {
this.storeData = this.store.getState();
}
}

Using Actions

Actions are objects that describe the type of change to be made to the application's state. Each action should have a unique name that clearly indicates the type of operation being performed.

$3

- Track State Changes: Actions allow you to precisely track state changes, which is particularly useful when debugging and using tools like Redux DevTools.
- Better Code Organization: Using actions helps in organizing your code better and separating business logic from presentation logic.
- Readability and Clarity: Well-named actions make it easier to understand what is happening in the application.

$3

- Action Names: Action names should be descriptive and clearly indicate what they do. A good pattern is to use the format FEATURE_ACTION, where FEATURE is the part of the application the action pertains to, and ACTION describes the operation.
- Constants: Use constants to define action names to avoid typos and facilitate refactoring.

Using Actions in Methods

public setFirstName(userName: string): void {
this.store.setState({ firstName: userName },' SET_FIRST_NAME');
}

public changeFirstName(newName: string): void {
this.store.setState({ firstName: newName }, 'UPDATE_FIRST_NAME');
}

public setUserData(user: myStoreInterface): void {
this.store.setState ({
firstName: 'Mateusz',
lastName: 'Jaracz',
},'SET_USER_DATA')
}

Get data from store

getState()

this.store.getState();
//returns {firstName: 'Mateusz', lastName: 'Jaracz'}

select()

this.store.select(state => state.firstName);
//returns Mateusz

## selectOn()

this.store.selectOn('firstName');
//returns Mateusz

Using effect

The effect method performs an HTTP request and updates the state with the response, returning a signal.

Parameters

url: The URL to which the HTTP request is sent.
action: A string describing the action.
method: The HTTP method (GET, POST, PUT, DELETE).
body: (Optional) The request payload.
headers: (Optional) The request headers.

## Example

public loadData(): void {
const headers = new HttpHeaders({
'Authorization': 'Bearer your-token'
});

const data: Signal<{ data: T } | null> = this.store.effect<{ data: T }>('https://api.example.com/data', 'LOAD_DATA', 'GET', null, headers);

effect(() => {
console.log(data());
// handle data or update component state
});
}

Using effectObservable

The effectObservable method performs an HTTP request and updates the state with the response, returning an observable.

Parameters

url: The URL to which the HTTP request is sent.
action: A string describing the action.
method: The HTTP method (GET, POST, PUT, DELETE).
body: (Optional) The request payload.
headers: (Optional) The request headers.

## Example

public loadData(): void {
const headers = new HttpHeaders({
'Authorization': 'Bearer your-token'
});

this.store.effectObservable<{ data: T }>('https://api.example.com/data', 'LOAD_DATA', 'GET', null, headers)
.subscribe(response => {
console.log(response);
// handle response or update component state
});
}

Using auto hydration data

ngControl provides automatic state saving and loading functionality when the browser window is closed.
To enable automatic state persistence, configure the provider as follows:

{ provide: 'HYDRATION_KEY', useValue: 'your_key' }.

Once this key is set, ngControl will automatically start saving the specified state values.

For example, if your state structure looks like this:

{ user: UserInterface, data: DataInterface }

and you want to automatically save the latest state of the user in the core part of the application,
you simply call

this.store.hydrationData(['user']).

This will ensure that the user state is automatically saved and restored when the application is reopened.

# Manual clear hydration data

this.store.clearHydrationData();

[License
ngControl is available under the MIT License. See the LICENSE file for more information.]()