How to extend aurelia store?

#1

I want to extend aurelia-store and add two methods to it
and it is not working …
following It is my code

import {Store} from "aurelia-store";

export class PaStore extends Store {

  constructor() {
    super();
  }

  registerActions(Actions) {
    for (let action in Actions) {
      if (Actions.hasOwnProperty(action)) {
        super.registerAction(action, Actions[action]);
      }
    }
  }

  unregisterActions(Actions) {
    for (let action in Actions) {
      if (Actions.hasOwnProperty(action)) {
        super.unregisterAction(action, Actions[action]);
      }
    }
  }

}

and then I added following config to main.js file


import {Store} from "aurelia-store";
import {PaStore} from './utilities/services/PaStore'; 

export function configure(aurelia) {
  aurelia.container.registerSingleton(Store, PaStore); // to add methods to Store to register and unregister array of actions aurelia.use
    .standardConfiguration()
    .feature(PLATFORM.moduleName('resources/index'))
    .feature(PLATFORM.moduleName('validation/index'))
    .plugin(PLATFORM.moduleName('aurelia-store'), {
      initialState
    });

  aurelia.use.developmentLogging(environment.debug ? 'debug' : 'warn');

  if (environment.testing) {
    aurelia.use.plugin(PLATFORM.moduleName('aurelia-testing'));
  }

  aurelia.start().then(() => aurelia.setRoot(PLATFORM.moduleName('app')));
}

and it gives this error

Screenshot%20(20)
Screenshot%20(20)1920×1080 150 KB

please help me

1 Like
#2

AFAIK, Store is a generic class: Store<T>; so I think it should be something like the following:

export class PaStore<T> extends Store<T> {

    public someMethods(){
        alert("somemethod called");
    }
}

BTW, this is my main.ts file:

export function configure(aurelia: Aurelia) {

  aurelia.container.registerSingleton(Store, PaStore); // <------ register your custom store

  aurelia.use
    .standardConfiguration()
    .plugin(PLATFORM.moduleName('aurelia-store'), { initialState })
    .feature(PLATFORM.moduleName('resources/index'));

  aurelia.use.developmentLogging(environment.debug ? 'debug' : 'warn');

  if (environment.testing) {
    aurelia.use.plugin(PLATFORM.moduleName('aurelia-testing'));
  }

  aurelia.start().then(() => aurelia.setRoot(PLATFORM.moduleName('app')));
}
2 Likes
#3

I’m also unsure about the timings when registering your singleton. Aurelia store will override that by itself here which happens during the plugin configuration phase. Since I can’t see where you’re registering your Actions, it might be better the register your singleton after the plugin intialization, but before action registrations.

3 Likes
#4

With js, we can simply mix-in (I mean monkey patch) without touching DI.

import {Store} from 'aurelia-store';

Store.prototype.registerActions = function(actions) {
  for (let action in actions) {
    if (actions.hasOwnProperty(action)) {
      this.registerAction(action, actions[action]);
    }
  }
}
4 Likes
#5

@zewa666 The sample I’ve put above actually returns the inherited store in the App class!

3 Likes
#6

thank you
I know this Solution but I want to solve with touching DI.

1 Like
#7

I did exactly the same. and I think I know where the problem is.
the Store constructor takes two parameter that I have to pass it by myself like the following

 import {Store} from "aurelia-store";

export class PaStore extends Store {

  constructor() {
    super(initialState , options);
  }
// omitted
}

but the problem is when the aurelia is making new instance from PaStore doesn’t pass the parameters that I pass them to super method in PaStore’s constructor

1 Like
#8

your example has a few issues:

  • constructor calls super but has no access to initialState and options
  • you’re making use of registerSingleton which tells Aurelia to create an instance, now it of course can’t pick up the parameters needed (these are provided in the plugins configure method)

So here’s a sample codesandbox that should show to do it with registerInstance.

4 Likes