Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
aurelia-store
Advanced tools
Aurelia single state store based on RxJS
THIS IS WORK IN PROGRESS, DO NOT USE YET FOR PRODUCTION
Install the npm dependency via
npm install aurelia-store rxjs
If your Aurelia CLI build is based on RequireJS or SystemJS you can setup the plugin using the following dependency declaration:
...
"dependencies": [
{
"name": "aurelia-store",
"path": "../node_modules/aurelia-store/dist/amd",
"main": "aurelia-store"
},
{
"name": "rxjs",
"path": "../node_modules/rxjs",
"main": false
}
]
In your main.ts
you'll have to register the Store using a custom entity as your State type:
import {Aurelia} from 'aurelia-framework'
import environment from './environment';
export interface State {
frameworks: string[];
}
export function configure(aurelia: Aurelia) {
aurelia.use
.standardConfiguration()
.feature('resources');
...
const initialState: State = {
frameworks: ["Aurelia", "React", "Angular"]
};
aurelia.use.plugin("aurelia-store", initialState); // <----- REGISTER THE PLUGIN
aurelia.start().then(() => aurelia.setRoot());
}
Once the plugin is installed and configured you can use the Store by injecting it via constructor injection.
You register actions (reducers) by with methods, which get the current state and have to return the modified next state.
An example VM and View can be seen below:
import { autoinject } from 'aurelia-dependency-injection';
import { State } from './state';
import { Store } from "aurelia-store";
const demoAction = (state: State) => {
const newState = Object.assign({}, state);
newState.frameworks.push("PustekuchenJS");
return newState;
}
@autoinject()
export class App {
public state: State;
constructor(private store: Store<State>) {
this.store.registerAction("DemoAction", demoAction);
setTimeout(() => this.store.dispatch(demoAction), 2000);
}
attached() {
// this is the single point of data subscription, the state inside the component will be automatically updated
// no need to take care of manually handling that. This will also update all subcomponents
this.store.state.subscribe(
state => this.state = state
);
}
}
<template>
<h1>Frameworks</h1>
<ul>
<li repeat.for="framework of state.frameworks">${framework}</li>
</ul>
</template>
Thanks goes to Dwayne Charrington for his Aurelia-TypeScript starter package https://github.com/Vheissu/aurelia-typescript-plugin
If you want to learn more about state containers in Aurelia take a look at this article from Pragmatic Coder
FAQs
Aurelia single state store based on RxJS
The npm package aurelia-store receives a total of 1,762 weekly downloads. As such, aurelia-store popularity was classified as popular.
We found that aurelia-store demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.