Aurelia store connectTo never sets target property

Question

I set the aurelia-store up as per the docs; in the main.ts at the bottom of all the plugins (from the skeleton app with dotnet core) I have as the last plugin defined:

aurelia.use.standardConfiguration()
.plugin(PLATFORM.moduleName('aurelia-store'), { initialState })

Then my app needs to login the user and save their bearer token.

await aurelia.start();
await aurelia.setRoot(PLATFORM.moduleName("modules/login/login.vm"));

In the login class I am trying to use the @connectTo decorator. However it never sets the dependency property. So I am stuck on this simple part at the very start of the app and my work already suggested not to use Aurelia but I said I wanted to for fast POC.

I've copied the docs exactly and still have the issue. Notably, I had to turn off strictNullCheck in the tsconfig to make the doc code parse.

Login.ts

@connectTo({
  target: 'state',
  selector: {
    userToken: (store) => store.state.pipe(pluck('userToken')), 
    loginRedirected: (store) => store.state.pipe(pluck('loginRedirected'))
  }
})
export class Login {
  static inject = [Aurelia, Store]
  public state: State;
  app: Aurelia;

  constructor(Aurelia, private store: Store<State>) {
    this.app = Aurelia
    store.registerAction('ChangeUserToken', this.changeUserToken)
    store.registerAction('LoginRedirected', this.loginRedirect)
  }

  activate() {
    ... this.state is always undefined.
    if (!this.state.loginRedirected) { //error
    }
  }
}

I expect the this.state property to have a state object populated from the global state store with the initialState values. e.g.

{ userToken: "", loginRedirected: false }

I just need to set the userToken in login and retrieve it in app.js. This is not possible; what could be missing to make this basic function actually work?

zewa666 zewa666 · Accepted Answer · 2019-08-23T19:18:01

ConnectTo is a helper decorator to avoid manual state subscriptions since the Stream of states is a vanilla rxjs observable. If you take a closer look at the official plugin documentation you will notice that it sets up the subscription in a different lifecycle hook.

That said connectTo cant solve everything and with manual subscription you have the most flexibility. Dont give up with your quest you just had bad luck of falling into a more complicated scenario of startup timing right at the begin which easy enough might bite you with lots of other Frameworks/Libraries as well. Also make sure to visit the official discourse.aurelia.io forum and post back solutions to SO.

Aurelia store connectTo never sets target property

1 Answers