Godam - рамка за магазин на JavaScript

В разработката на предния край - стана обичайна практика да се използва магазин за управление на състояния. Различни рамки като vue, react предоставят официални инструменти за магазин като vuex, redux и др.

Вдъхновен от този инструмент за магазини - създадох друга рамка „Godam“.

Godam е модулна и реактивна рамка за управление на състоянието. Той е много общ, така че може да се използва във всяка предна или бекенд рамка.

Ето връзка към github - https://github.com/ujjwalguptaofficial/godam

Godam е проектиран като се има предвид - може да се използва навсякъде дори в реакция, vue или вашата персонализирана рамка.

Дори създадох плъгин за vue и react.

• Vue - https://github.com/ujjwalguptaofficial/godam-vue
• Реагирайте - https://github.com/ujjwalguptaofficial/godam-react

Архитектура

Godam е дума на хинди, която означава „godown“.

Градът се използва за съхранение на голямо количество стоки. Може да има множество стаи за съхранение на артикули от определена категория или да съхранява артикули по такъв начин, че да може да бъде разграничен по-късно.

Всички предмети се съхраняват през портата и се изтеглят от вратата. Това гарантира, че всеки може да има регистрационни файлове за това, което се съхранява и да изтегли.

Тези принципи са използвани в Godam.

Да кодираме

Godam има шест важни концепции -

• състояние
• Мутация
• Изразяване
• Изчислено
• Задача
• Изразяване

състояние

Състоянието се използва за съхраняване на стойността.

class MyState{

    constructor(){
        this.name = "Ujjwal Gupta"
    }

}

Мутация

Мутацията може да се използва за мутиране (промяна) на стойността на състоянието. Мутацията винаги е синхронна.

import { Godam, Mutation} from "godam";

class MyMutation extends Mutation{

    name(value){
        this.state.name = value;
    }
}

Изразяване

Изразът може да се използва за извличане на стойност от състояние. Те са код, който има достъп до състояние.

import { Godam, Expression} from "godam";

class MyExpression extends Expression {

    get nameLength() {
        return this.get('name').length;
    }

    nameWithPrefix(prefix){
        return prefix + this.get('name')
    }
}

Изчислено

Изчислените са изрази, които са кеширани. Така че те ще бъдат извикани само когато състоянието се промени. Може да се използва за увеличаване на производителността.

import { Godam, Expression, Computed} from "godam";

class MyExpression extends Expression {

    // nameLength will be called only name is changed
    @Computed('name')
    get nameLength() {
        return this.get('name').length;
    }
}

Задача

Всяка логика, която изисква много манипулиране на магазина, може да бъде създадена като задача. Задачата има достъп до — state , mutation, expression.

import {Task} from "godam";

class MyTask extends Task {

    saveInfo(name){
        const savedName = this.get('name');
        if(name!=savedName){
            this.set('name', name);
        }
        const payload = {
            name : name,
            count: this.eval('nameCount')
        }
    }
}

Стая

Стаята може да се използва за разделяне на вашия магазин на множество части и съхраняване на артикули от определена категория.

Стаята може да има всички важни части - състояние, мутация, задача, израз.

import { Godam, Mutation, Room } from "godam";

class AccountState {
    id = ""
}

class AccountMutation extends Mutation{
    id(value) {
        this.state.id = value;
    }
}

const accountRoom = new Room({
    state: AccountState,
    mutation: AccountMutation
})

сега нека използваме всички части, за да създадем godam и да видим как можем да правим различни действия -

import { Godam, Mutation, Room } from "godam";
const myStore = new Godam({
    state : MyState,
    mutation: MyMutation,
    expression: MyExpression,
    task: MyTask,
    rooms: {
        account: accountRoom
    }
})

Нека извършим някои действия -

Вземете данни

const name = myStore.get('name');
// read data from room account
const accountId = myStore.get('id@account');

Промяна на данни

myStore.set('name', 'Ujjwal kr gupta');
// change data in room account
myStore.set('id@account', 1);

Оценете израза

myStore.eval('nameLength');
myStore.eval('nameWithPrefix', 'hello');

Изпълнете задача

myStore.do('saveInfo', 'hello world');

Надявам се, че тази статия ви дава контекст за Godam. Ако използвате godam във вашия проект и имате нужда от помощ, не се колебайте да зададете въпрос, като добавите проблем в Godam github.

Можете да започнете, като изтеглите репото example present in godam github.