Skip to content

Advanced logging middleware for @ngrx/store applications

License

Notifications You must be signed in to change notification settings

Algotec/ngrx-store-logger

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

48 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

ngrx-store-logger

Advanced logging for @ngrx/store applications, ported from redux-logger.

ngrx-store-logger

Dependencies

ngrx-store-logger depends on @ngrx/store and Angular 2.

Usage

npm install ngrx-store-logger --save
  1. Import compose and combineReducers from @ngrx/store and @ngrx/core/compose
  2. Invoke the storeLogger function from ngrx-store-logger, passing appropriate options.
  3. Add combineReducers after storeLogger and invoke composed function with application reducers as an argument to provideStore.
import {bootstrap} from '@angular/platform-browser-dynamic';
import {TodoApp} from './todo-app';
import {provideStore, combineReducers} from "@ngrx/store";
import {compose} from "@ngrx/core/compose";
import {storeLogger} from "ngrx-store-logger";
import {todos, visibilityFilter} from './reducers';

export function main() {
  return bootstrap(TodoApp, [
      //taking all logging defaults
      //todos and visibilityFilter are just sample reducers
      provideStore(
        compose(
            storeLogger(), 
            combineReducers
        )({todos, visibilityFilter})
      ),
  ])
  .catch(err => console.error(err));
}

document.addEventListener('DOMContentLoaded', main);

API

storeLogger(options : LoggerOptions = {}) : Reducer

Initializes logger with appropriate options (logical defaults if no options supplied) Returns a meta-reducer

Arguments

  • options (Object): Available logger options
Options
interface LoggerOptions {
    level? : 'log' | 'console' | 'warn' | 'error' | 'info'; //default log
    collapsed? : boolean; //Should log group be collapsed? default: false
    duration? : boolean; //Print duration with action? default: true
    timestamp? : boolean; //Print timestamp with action? default: true
    stateTransformer? : (state : Object) => Object; //Transform state before print default: state => state
    actionTransformer? : (actn : Object) => Object; //Transform action before print default: actn => actn
    colors? : {
        title: (action : Object) => string;
        prevState: (prevState : Object) => string;
        action: (action: Object) => string;
        nextState: (nextState : Object) => string;
        error: (error: any, prevState: Object) => string;
    }
}

About

Advanced logging middleware for @ngrx/store applications

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 54.2%
  • TypeScript 45.8%