ngrx-extensions

A set of utilities for NgRx family.

Features

• @ngrx/store
  • createFeatureStoreSelector()

Install

yarn add @classi/ngrx-extensions

APIs

[store] createFeatureSlice()

Creates a feature Slice. The returned Slice object has additional properties: select and initialState. select method is the same to returned function by createFeatureStoreSelector.

See details in counter-slice.ts

// counter-slice.ts
import { createFeatureSlice, PayloadAction } from '@classi/ngrx-extensions';

export type State = {
  count: number;
};

const initialState: State = {
  count: 0,
};

export default createFeatureSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment: () => ({ ...state, count: state.count + 1 }),
    set: (state, action: PayloadAction<number>) => ({
      ...state,
      count: action.payload,
    }),
    reset: () => ({ count: 0 }),
  },
});

import { Store } from '@ngrx/store';
import counterSlice from './counter-slice';

@Component({})
export class SomeComponent {
  constructor(private readonly store: Store<{}>) {}

  // Retrieve a scoped state from the store
  readonly count$ = counterSlice.select(this.store, (state) => state.count);

  increment() {
    this.store.dispatch(counterSlice.actions.increment());
  }

  setCount(count: number) {
    this.store.dispatch(counterSlice.actions.set(count));
  }

  reset() {
    this.store.dispatch(counterSlice.actions.reset());
  }
}

[store] createFeatureStoreSelector()

See details in counter-store.ts

// counter-store.ts
export default function reducer(state: State, action: typeof actionsUnion) {
  return _reducer(state, action);
}

export const featureName = 'counter';
export const select = createFeatureStoreSelector<State>(featureName);

import { Store } from '@ngrx/store';
import * as counterStore from './counter-store';

@Component({})
export class SomeComponent {
  constructor(private readonly store: Store<{}>) {}

  // Retrieve a scoped state from the feature store
  readonly count$ = counterStore.select(this.store, (state) => state.count);
}