Aurelia 2 - Store

Help Requests
1

So I am looking to add an undo to the Sudoku app and was going to use the store.

I initially tried to use the old version (AU1) and it wasn’t getting state initialized.
I tied to pull the @aurelia/store and it appears to just be a placeholder project atm.

Is there an example of using the the older store plugin using the newer aurelia.register

Thanks!

1 Like
2

Maybe try @aurelia/store@dev instead.

1 Like
3

Thanks for the suggestion.
I did try that and in looking at the node-modules directory after installation it appeared to just be the placeholder project as well. I tried looking through the different branches and packages and couldn’t find anything that (to me at least) appeared relevant.

1 Like
4

Hey there, the reason for no v2 version is that Corona and my paternity leave pushed that backwards :wink:

I’ll be gathering some inputs and coming back to finishing the tests next week. There is a branch called aurelia-store where already most of the work is done thanks to @dwaynecharrington. I’ve updated it to be feature-equal with v1 and hopefully soon should have a deployable version.

I’ll let you guys know here once it’s published as I’m definitely looking forward to some help testing it out in your projects

1 Like
5

Thanks for the update. I haven’t pushed or tagged folks because I figured those in the know were well aware and it was just a time available thing. You guys rock.

1 Like
6

Work is progressing, slowly but steady. I had to learn tons of stuff about how v2 works and admitted there will be a few minor breaking changes. On the other hand issues we experienced with testing components using connectTo or other globals such as window are going to be eliminated. Also the registration process is now going to be typesafe whereas in v1 you had to know what to provide to the plugin instantiation API.

Overall I must say I’m super excited how things go. It will take a while but I’m sure people are going to love it.

4 Likes
7

@zewa666 Any updates on Aurelia 2 Store?

8

yep you can install the direct v1 port via npm i @aurelia/store-v1

afterwards register the plugin in your app like

await au.register(
    StoreConfiguration.withInitialState(YourInitialState)
      .withOptions(options))
    .app({ host, component })
    .start();

where options is now a typesafe way for setting up the plugin

2 Likes
9

@zewa666 I’m running into a typings issue. I have an action:

export const setShortcutResources = (state: IAppState, model: IShortcutResources) => {
  const newState = { ...state };
  newState.shortcut.workflows = model.workflows;
  newState.shortcut.workflowStates = model.workflowStates;
  return newState;
};

…which I’m them trying to wire up here:

import { inject } from 'aurelia';
import { connectTo, Store } from '@aurelia/store-v1';

import { ipcRenderer } from 'electron';

import { IAppState } from './state/empty-state';
import { IShortcutResources } from '../shared/models/shortcut-resources.dto';
import { setShortcutResources } from '../renderer/state/actions/shortcut-resource-actions';

@inject(Store)
@connectTo()
export class EpicApp {
  public loading = false;
  public errorMessage?: string | null;

  private store: Store<IAppState>;

  constructor(store: Store<IAppState>) {
    this.store = store;

    store.registerAction('Set Shortcut Resources', setShortcutResources);
  }

  public attached(): void {
    this.loading = true;
    this.loadEpicResources();
  }

  public async loadEpicResources(): Promise<void> {
    try {
      const shortcutResources = (await ipcRenderer.invoke(
        'shortcut-resources-load'
      )) as IShortcutResources;
      this.store.dispatch(setShortcutResources, shortcutResources);
    } catch (error: unknown) {
      this.errorMessage = (error as Error).message;
    } finally {
      this.loading = false;
    }
  }
}

…I get the following typing error on line store.registerAction('Set Shortcut Resources', setShortcutResources);:

Argument of type '(state: IAppState, model: IShortcutResources) => IAppState' is not assignable to parameter of type 'Reducer<IAppState, unknown[]>'.
  Types of parameters 'model' and 'params' are incompatible.
    Type 'unknown' is not assignable to type 'IShortcutResources'.ts(2345)
10

hmm thats interesting. what TS version are you using? also it seems this is an electron app and you have types shared. are they part of the same project just renderer/main shared?

the definition of the params used to be any in v1 (store/store.ts at master · aurelia/store · GitHub) so I’m not sure if really the new unknown is causing the issues.

11

I’m using typescript 4.4.4. Yes a single project with renderer & main projects sharing model layer.

When looking at store.ts in my node_modules I see version 2.0.0-alpha.23 (latest available) with the signature below. Notice the P extends unknown[]

image
image1157×204 32.6 KB

12

exactly, and I was under the impression this should work. could you give the following a try? change the nodemodules source of the plugin to use any in that position just so we verify its the unknown vs any

13

No juice, same error. I had a hard time believing that, and went so far as to restart the VSCode typescript server, and then VSCode itself when that didn’t work. Same error from command line running webpack.

For now I’m working around by casting my action to any and all functions as expected:

store.registerAction('Set Shortcut Resources', <any>setShortcutResources);
14

meh, sry for the troubles but could I ask you for a minimal repro so I can pin the error down?