AngularJS Redux Example

component.ts

import { Component, Inject, Input } from 'core/decorators';
import { actions, Notification } from 'core/store/ducks/notifications';
import { ReduxProvider } from 'core/store/utilities/provider';

import './notification.item.scss';

@Component({
    selector: 'notificationItem',
    template: require('./notification.item.html')
})
export class NotificationItemComponent {
    @Input('<')
    public notification: Notification;
    private unsubscribe: () => void;

    constructor(
        @Inject('$redux') private $redux: ReduxProvider
    ) {}

    $onInit() {
        this.unsubscribe = this.$redux.connect(
                state => ({
                  notificaton: state.activeNotification,
                }),
                dispatch => ({
                    togglePin: (payload) => dispatch(actions.togglePin(payload)),
                })
            )(this);
    }
}

provider.ts

import * as angular from 'angular';
import createStore from 'core/store';

export class ReduxProvider {
    public $get;
    private store: any;

    constructor() {
        this.connect = this.connect.bind(this);
        this.$get = [() => {
            this.store = createStore();

            return Object.assign({}, this.store, {
                connect: this.connect
            });
        }];
    }

    connect(
        mapStateToThis = (...args) => ({}),
        mapDispatchToThis = (...args) => ({})
    ) {
        return instance => {
            const { getState, dispatch } = this.store;
            const state = getState();

            const props = mapStateToThis(state);
            const actions = mapDispatchToThis(dispatch);

            Object.assign(instance, props, actions);

            return this.store.subscribe(() => {
                const nextState = getState();
                const p = mapStateToThis(nextState);
                const a = mapDispatchToThis(dispatch);

                return Object.assign(instance, p, a);
            });
        };
    }
}

export default angular.module('redux', [])
    .provider('$redux', ReduxProvider)
    .name;