@disorrder/storm v0.3.1

Store Modules

Redux is a predictable state container for JavaScript apps. (c) Facebook

Storm is inspired by Redux and Vuex with saving all core conepts but in more simple OOP style. Do the same with less code and even more!

Install

npm install --save @disorrder/storm

Just show me the code!

See more in examples folder.

import {Store, state, Mutation, Action} from "@disorrder/storm";

export default class Account extends Store {
    @state amount = 0

    @Mutation setAmount(val = 0) {
        return {amount: val};
    }

    @Action async updateAmount() {
        let {data} = await api.get("/user/account");
        // Variant 1
        this.setAmount(data);
        // Variant 2
        this.amount = data;
        // Variant 3
        this.mutate({amount: data}); // Actually you won't use this
        // This 3 variants are equal.
    }
}

There is a mutate() call inside amount state's setter. If you want to change two properties or more, it's better to use Mutation:

export default class Account extends Store {
    // . . .

    @state transactions = []

    @Mutation charge(val = 0) { // mutates 2 properties in one time
        let transaction = {
            id: this.transactions.length + 1,
            amount: val,
            date: Date.now(),
        };
        let transactions = [...this.transactions, transaction]; // never use .push(), always copy objects
        return {
            amount: this.amount + val,
            transactions,
        };
    }
}

Yep, that's it!

Import store

// ./src/store/index.js
import Account from "./Account"
export const account = new Account()

import {account} from "/src/store"

Subscribe

// Let the props be only props
account.subscribe((mutation, oldState) => {
    // React Component constructor:
    this.setState({});
})

Inheritance

import user from "./store";

class App extends Component { componentDidMount() { user.subscribe(() => { this.setState({}); }); } }