ngrx-store-helper v0.2.0

ngrx-store-helper

Installation

To install this library, run:

$ npm install ngrx-store-helper --save

and then from your Angular AppModule:

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';

import {AppComponent} from './app.component';

import {environment} from '../environments/environment';
import {StoreModule} from '@ngrx/store';
import {StoreDevtoolsModule} from '@ngrx/store-devtools';
import {StoreHelperModule, UndoStore} from 'ngrx-store-helper';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    
    StoreHelperModule,
    StoreModule.forRoot({
      count: reducer,
    }, {metaReducers: [UndoStore.Handle]}),
    StoreDevtoolsModule.instrument({
      maxAge: 25,
      logOnly: environment.production,
    }),
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Once your library is imported, you can use its components, directives and pipes in your Angular application.

Development

To generate all *.js, *.d.ts and *.metadata.json files:

$ npm run build

To lint all *.ts files:

$ npm run lint

StoreObject

import {Action, ActionReducer} from '@ngrx/store';

export namespace PageStore {
  export interface PageAction extends Action {
    page: {name: string};
  }

  const Types = {
    SET: '[Page] Set',
    CLEAR: '[Page] Clear',
  };

  export const Actions = {
    Set: (page: {name: string}): PageAction => ({type: Types.SET, page}),
    Clear: (): Action => ({type: Types.CLEAR}),
  };

  export const Selectors = {
    pageName: (state: any) => state.page ? state.page.name : null,
  };

  export const Reducer: ActionReducer<number> = (state: any = null, action: Action) => {
    switch (action.type) {
      case Types.SET:
        return (<PageAction>action).page;
      case Types.CLEAR:
        return null;
      default:
        return state;
    }
  };
}

UndoStore

Use UndoStore

import {environment} from '../environments/environment';
import {StoreModule} from '@ngrx/store';
import {StoreDevtoolsModule} from '@ngrx/store-devtools';
import {UndoStore} from 'ngrx-store-helper';

@NgModule({
  imports: [
    ...
    StoreModule.forRoot({
      count: reducer,
    }, {metaReducers: [UndoStore.Handle]}),
    StoreDevtoolsModule.instrument({
      maxAge: 25,
      logOnly: environment.production,
    }),
  ],
})
export class AppModule { }

After adding to the AppModule you can use it to undo an action:

import {UndoStore} from 'ngrx-store-helper';

// create an action
let action = {type: REMOVE_TODO, payload: {id: todo.id}};

// dispatch the action
this.store.dispatch(action);

// undo the action
this.store.dispatch(UndoStore.Actions.Single(action));

// undo multiple actions
this.store.dispatch(UndoStore.Actions.Multiple([action]));

Set Buffer Size

import {UndoStore} from 'ngrx-store-helper';

// if you want to update the buffer (which defaults to 100)
UndoStore.configureBufferSize(100);

StoreHelper

Get Current State

StoreHelper.getState(store: Store);