Aurelia state management

Question

Are there any best practices or a library for state management in aurelia? something like vue.js's integrated state management?

I have seen some suggestions ranging from a simple object:

export default {
user: ...,
router: ...,
...,
}

to some aurelia redux integrations : https://github.com/steelsojka/aurelia-redux-plugin

Has anyone made good eperiences with a library with less complexity? Redux is to much boilerplate in my opinion. I would like some wrapper with a smaller footprint similar to jumpsuit for react.

I have used multiple attempts:

store.js

store as object:

export default{
  test: 'xxx'
};

store as class:

export default class Store{
  constructor() {
    this.test = 'xxx';
  }
};

and in the component I integrate it like this:

import { inject } from 'aurelia-framework';
import store from './store';

@inject(store)
export class TestComp {
  constructor(store){
    this.store = store;
  }
}

or even without inject:

import store from './store';

export class TestComp {
  constructor(){
    this.store = store;
  }
}

All combinations seem to work just fine and the store keeps in sync between Views/Components.

What are the (dis)advantages of one over the other... or would you suggest completely different approach in the first place?

Answer 1

Meanwhile Aurelia-Store, an official Aurelia plugin for state management, has been officially released. Take a look at the docs to see how it works.

Answer 2

You can read more about this in http://patrickwalters.net/my-best-practices-in-aurelia/

I would suggest using inject.

Answer 3

I've gone for the class method, and then injecting the class as and where I need it.

import {observable} from 'aurelia-framework';
import {Cookie} from 'aurelia-cookie';

export class AppConfig {

  @observable companyCode;
  @observable applCodeInUse;
  @observable theme;

  constructor() {
    // Set up properties in here
  }

  // Some functions used for value conversion

}

Then, because injected classes are treated as singletons - you can just inject the AppConfig class and access the properties.

import {inject, NewInstance, ObserverLocator} from 'aurelia-framework';
import {AppConfig} from 'config/AppConfig';

@inject(AppConfig)
export class Form {
    constructor(appConfig) {
       this.appConfig = appConfig;
    }
} 

This is obviously very similar to one of your solutions. I used a class as there's some business logic that is used to convert values and so on.

Your doubts seem to be about whether this is bad design - but the point of Aurelia is as long as your code follows standards, then you're free to use whatever convention you like to achieve your results. There's nothing about this method, as far as I'm aware, that goes against the latest JS standards. It's also lightweight and flexible. I see no problem with it.

Answer 4

Another approach is to keep using classic services and yet have a single state in a store only changed via actions. You can find an article about it here http://pragmatic-coder.net/using-a-state-container-with-aurelia/ . This approach uses a RxJS BehaviorSubject at the core which is subscribed to in order to have components sync with the state. Besides that it offers an easier upgrade path for existing apps compared to using redux and having to rewrite your app. Oh and Redux DevTools support is included as well ;)