@harmowatch/redux-decorators

What is this package for?

This package provides a set of decorators you've to wire manually against redux. The decorators are used well in the Angular 2+ package @harmowatch/ngx-redux-core.

The following decorators are available

ReduxActionDecorator

• [ ] can be used on class declarations
• [x] can be used on class method declarations

When the decorated method was called it will invoke ReduxActionDispatcher.dispatch. Please checkout the documentation about ReduxActionDispatcher for more information about action dispatching.

class SomeActionClass {

    // (1.1) decorate a class method 
    @ReduxActionDecorator.forMethod({type: 'some-other-type'})
    public methodWithCustomType<T>(input: T): T {
        return input;
    }

    // (1.2) decorate a class method
    @ReduxActionDecorator.forMethod()
    public methodWithAutomaticType<T>(input: T): T {
        return input;
    }

}

// (2.1) get the decorated data (will return {type: 'some-other-type', contextClass: SomeActionClass})
ReduxActionContextDecorator.get(SomeActionClass.prototype.methodWithCustomType)

// (2.2) get the decorated data (will return {type: 'methodWithAutomaticType', contextClass: SomeActionClass})
ReduxActionContextDecorator.get(SomeActionClass.prototype.methodWithAutomaticType)

take a look at the unit test

ReduxActionContextDecorator

• [X] can be used on class declarations
• [ ] can be used on class method declarations

This decorator only makes sense together with the ReduxActionDecorator, because the configured prefix is used a prefix for each configured action type. Please see ReduxActionDispatcher.getType for more information.

// (1) decorate the class
@ReduxActionContextDecorator.forClass({prefix: 'prefix://foo/bar'})
class SomeActionClass {

    @ReduxActionDecorator.forMethod({type: 'some-other-type'})
    public methodWithCustomType<T>(input: T): T {
        return input;
    }

    @ReduxActionDecorator.forMethod()
    public methodWithAutomaticType<T>(input: T): T {
        return input;
    }

}

// (2) get the decorated data (will return {prefix: 'prefix://foo/bar'})
ReduxActionContextDecorator.get(SomeActionClass)

take a look at the unit test

ReduxReducerDecorator

• [ ] can be used on class declarations
• [X] can be used on class method declarations

This decorator will wire a reducer class method against a method that was decorated by the ReduxActionDecorator.

class SomeReducerClass {

    // (1.1) decorate a class method 
    @ReduxReducerDecorator.forMethod(SomeActionClass.prototype.methodWithCustomType)
    public doSomething() {

    }

    // (1.2) decorate a class method 
    @ReduxReducerDecorator.forMethod([
        SomeActionClass.prototype.methodWithCustomType,
        SomeActionClass.prototype.methodWithAutomaticType,
    ])
    public doSomethingWhenOneOfTheActionsAreInvoked() {

    }

}

// (2.1) get the decorated data (will return SomeActionClass.prototype.methodWithCustomType)
ReduxReducerDecorator.get(SomeReducerClass.prototype.doSomething)

// (2.2) get the decorated data (will return [SomeActionClass.prototype.methodWithCustomType, SomeActionClass.prototype.methodWithAutomaticType])
ReduxReducerDecorator.get(SomeReducerClass.prototype.doSomethingWhenOneOfTheActionsAreInvoked)

take a look at the unit test

ReduxStateDecorator

• [X] can be used on class declarations
• [ ] can be used on class method declarations

// (1) decorate the class
@ReduxStateDecorator.forClass({name: 'state-1-2-3'})
class SomeStateClass {

}

// (2) get the decorated data (will return {name: 'state-1-2-3'})
ReduxStateDecorator.get(SomeStateClass)

take a look at the unit test

Action dispatching

ReduxActionDispatcher

As already mentioned above there's a additional static class ReduxActionDispatcher. This class has two public static methods:

ReduxActionDispatcher.getType

This method will resolve a valid redux action type for the given method. The given method must be decorated by ReduxActionDecorator.forMethod. If the class of the method is also decorated by ReduxActionContextDecorator.forClass, then the defined prefix is prepended to the returned string.

take a look at the unit test

ReduxActionDispatcher.dispatch

The dispatch method will emit a new action on the rxjs.Subject you can access by the public, readonly property ReduxActionDispatcher.dispatchedActions. If the return value of the action method is an Observable or a Promise, then the action is dispatched only if the Observable completes or the Promise resolves.

ReduxActionDispatcher.dispatchedActions.subscribe(action => {
    // do something when a action was dispatched i.e. fire the redux action on your store
})

take a look at the unit test