@angular-architects/ngrx-toolkit - npm Package Compare versions

Comparing version 0.0.4 to 0.0.6

index.d.ts

@@ -6,1 +6,3 @@ export { withDevtools, patchState, Action } from './lib/with-devtools';
 export * from './lib/with-data-service';
+export * from './lib/redux-connector';
+export * from './lib/redux-connector/rxjs-interop';

package.json

 {
   "name": "@angular-architects/ngrx-toolkit",
-  "version": "0.0.4",
+  "version": "0.0.6",
+  "license": "MIT",
+  "repository": {
+    "type": "GitHub",
+    "url": "https://github.com/angular-architects/ngrx-toolkit"
+  },
   "peerDependencies": {
@@ -5,0 +10,0 @@ "@angular/common": "^17.0.0",

README.md

 # NgRx Toolkit
 
+[![npm](https://img.shields.io/npm/v/%40angular-architects%2Fngrx-toolkit.svg)](https://www.npmjs.com/package/%40angular-architects%2Fngrx-toolkit)
+
 <p align="center">
@@ -11,2 +13,3 @@ <img src="https://raw.githubusercontent.com/angular-architects/ngrx-toolkit/main/logo.png" width="320" style="text-align: center">
 - Redux: Possibility to use the Redux Pattern (Reducer, Actions, Effects)
+- Redux Connector: Map NgRx Store Actions to a present Signal Store
 
@@ -19,2 +22,16 @@ To install it, run
 
+
+- [NgRx Toolkit](#ngrx-toolkit)
+  - [Devtools: `withDevtools()`](#devtools-withdevtools)
+  - [Redux: `withRedux()`](#redux-withredux)
+  - [DataService `withDataService()`](#dataservice-withdataservice)
+  - [DataService with Dynamic Properties](#dataservice-with-dynamic-properties)
+  - [Redux Connector for the NgRx Signal Store `createReduxState()`](#redux-connector-for-the-ngrx-signal-store-createreduxstate)
+    - [Use a present Signal Store](#use-a-present-signal-store)
+    - [Use well-known NgRx Store Actions](#use-well-known-ngrx-store-actions)
+    - [Map Actions to Methods](#map-actions-to-methods)
+    - [Register an Angular Dependency Injection Provider](#register-an-angular-dependency-injection-provider)
+    - [Use the Store in your Component](#use-the-store-in-your-component)
+
+
 ## Devtools: `withDevtools()`
@@ -222,2 +239,134 @@
 }
-```
+```
+
+## Redux Connector for the NgRx Signal Store `createReduxState()`
+
+The Redux Connector turns any `signalStore()` into a Gobal State Management Slice following the Redux pattern.
+
+It supports:
+
+✅ Well-known NgRx Store Actions \
+✅ Global Action `dispatch()` \
+✅ Angular Lazy Loading \
+✅ Auto-generated `provideNamedStore()` & `injectNamedStore()` Functions \
+✅ Global Action to Store Method Mappers \
+
+
+### Use a present Signal Store
+
+```typescript
+export const FlightStore = signalStore(
+  // State
+  withEntities({ entity: type<Flight>(), collection: 'flight' }),
+  withEntities({ entity: type<number>(), collection: 'hide' }),
+  // Selectors
+  withComputed(({ flightEntities, hideEntities }) => ({
+    filteredFlights: computed(() => flightEntities()
+      .filter(flight => !hideEntities().includes(flight.id))),
+    flightCount: computed(() => flightEntities().length),
+  })),
+  // Updater
+  withMethods(store => ({
+    setFlights: (state: { flights: Flight[] }) => patchState(store,
+      setAllEntities(state.flights, { collection: 'flight' })),
+    updateFlight: (state: { flight: Flight }) => patchState(store,
+      updateEntity({ id: state.flight.id, changes: state.flight }, { collection: 'flight' })),
+    clearFlights: () => patchState(store,
+      removeAllEntities({ collection: 'flight' })),
+  })),
+  // Effects
+  withMethods((store, flightService = inject(FlightService)) => ({
+    loadFlights: reduxMethod<FlightFilter, { flights: Flight[] }>(pipe(
+      switchMap(filter => from(
+        flightService.load({ from: filter.from, to: filter.to })
+      )),
+      map(flights => ({ flights })),
+    ), store.setFlights),
+  })),
+);
+```
+
+### Use well-known NgRx Store Actions
+
+```typescript
+export const ticketActions = createActionGroup({
+  source: 'tickets',
+  events: {
+    'flights load': props<FlightFilter>(),
+    'flights loaded': props<{ flights: Flight[] }>(),
+    'flights loaded by passenger': props<{ flights: Flight[] }>(),
+    'flight update': props<{ flight: Flight }>(),
+    'flights clear': emptyProps()
+  }
+});
+```
+
+### Map Actions to Methods
+
+```typescript
+export const { provideFlightStore, injectFlightStore } =
+  createReduxState('flight', FlightStore, store => withActionMappers(
+    mapAction(
+      // Filtered Action
+      ticketActions.flightsLoad,
+      // Side-Effect
+      store.loadFlights,
+      // Result Action
+      ticketActions.flightsLoaded),
+    mapAction(
+      // Filtered Actions
+      ticketActions.flightsLoaded, ticketActions.flightsLoadedByPassenger,
+      // State Updater Method (like Reducers)
+      store.setFlights
+    ),
+    mapAction(ticketActions.flightUpdate, store.updateFlight),
+    mapAction(ticketActions.flightsClear, store.clearFlights),
+  )
+);
+```
+
+### Register an Angular Dependency Injection Provider
+
+```typescript
+export const appRoutes: Route[] = [
+  {
+    path: 'flight-search-redux-connector',
+    providers: [provideFlightStore()],
+    component: FlightSearchReducConnectorComponent
+  },
+];
+```
+
+### Use the Store in your Component
+
+```typescript
+@Component({
+  standalone: true,
+  imports: [
+    JsonPipe,
+    RouterLink,
+    FormsModule,
+    FlightCardComponent
+  ],
+  selector: 'demo-flight-search-redux-connector',
+  templateUrl: './flight-search.component.html',
+})
+export class FlightSearchReducConnectorComponent {
+  private store = injectFlightStore();
+
+  protected flights = this.store.flightEntities;
+
+  protected search() {
+    this.store.dispatch(
+      ticketActions.flightsLoad({
+        from: this.localState.filter.from(),
+        to: this.localState.filter.to()
+      })
+    );
+  }
+
+  protected reset(): void {
+    this.store.dispatch(ticketActions.flightsClear());
+  }
+}
+```

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

No License Found

License

(Experimental) License information could not be found.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

240700

increased by32.04%

Number of package files

35

increased by66.67%

Number of low license alerts

0

decreased by-100%

Lines of code

1607

increased by23.62%

Number of lines in readme file

370

increased by68.18%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes