An Action Creator Factory for ngrx
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
bundles udpated Dec 26, 2016
config now exported from root folder (src for later) Dec 26, 2016
src Update ngrx-action-creator-factory.ts Jan 6, 2017
.gitignore
.npmignore initial commit Dec 25, 2016
.travis.yml updated node version Dec 26, 2016
LICENSE initial commit Dec 25, 2016
README.md
karma-test-shim.js initial commit Dec 25, 2016
karma.conf.js initial commit Dec 25, 2016
make.js
ngrx-action-creator-factory.ts now exported from root folder (src for later) Dec 26, 2016
package.json udpated Dec 26, 2016
tsconfig.json initial commit Dec 25, 2016
typings.json

README.md

Ngrx Action Creator Factory

This is an angular 2 provider based (or a simple class) - read about the concept at Simple Action Creators for ngrx/store in Angular 2.
This service came out as a result of the open source project Echoes Player - an alternative player for watching and listening to media from youtube.

The Benefit - Minimal & Typed

This factory allows to decalre a minimal action creator declaration with a typed payload for the action creator function and have type support when using this function. This also results (in most cases) in a one line declaration.

Angular 2 Support

supports Angular 2 - Final - 2.2.1

LICENSE

MIT

Installation

npm install ngrx-action-creator-factory --save

Supported API

Currently supported:

  • ActionCreatorFactory.create(action: string, payload?: any)

Usage

First, import the ActionCreatorFactory to your module:

import { NgModule } from '@angular/core';
import { ActionCreatorFactory } from 'ngrx-action-creator-factory';

@NgModule({
  imports:[ BrowserModule ],
  providers: [ ActionCreatorFactory ],
  declarations: [ AppComponent, ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

platformBrowserDynamic().bootstrapModule(AppModule);

Next, use the ngrx-action-creator-factory either as a static factory or as an injectable provider:

import { Injectable } from '@angular/core';
import { Action } from '@ngrx/store';
import { ActionCreatorFactory } from 'ngrx-action-creator-factory';

@Injectable()
export class NowPlaylistActions {
  static MEDIA_ENDED = '[NOW PLAYLIST] MEDIA_ENDED';
  static QUEUE = '[NOW PLAYLIST] QUEUE';
  static SELECT = '[NOW PLAYLIST] SELECT';

  // as injectable
  constructor(private acf: ActionCreatorFactory) {
    this.queueVideo = this.acf.create(NowPlaylistActions.QUEUE);
    // This is the same as the above
    this.queueVideo = this.acf.create<void>(NowPlaylistActions.QUEUE);
  }

  // as a static method
  mediaEnded = ActionCreatorFactory.create(NowPlaylistActions.MEDIA_ENDED);
  // OR as a static typed method
  selectMedia = ActionCreatorFactory.create<GoogleApiYouTubeVideoResource>(NowPlaylistActions.SELECT);
}

Testing

To start developing tdd/bdd style: npm run dev This will: compile ts files, watch for changes and start the test task. Whenever a ts file is changed, it will rerun the tests.

Showcase Examples