An open API service indexing awesome lists of open source software.

https://github.com/ujjwalguptaofficial/godam

Modular & reactive state management framework.
https://github.com/ujjwalguptaofficial/godam

framework javascript react store typescript vue

Last synced: 7 months ago
JSON representation

Modular & reactive state management framework.

Awesome Lists containing this project

README

          

[![TEST](https://github.com/ujjwalguptaofficial/godam/actions/workflows/test.yml/badge.svg)](https://github.com/ujjwalguptaofficial/godam/actions/workflows/test.yml)
[![npm version](https://badge.fury.io/js/godam.svg)](https://badge.fury.io/js/godam)

# godam

Modular & reactive state management framework.

> Godam is Hindi word which means godown. The architecture of the framework is similar to godown.

# Architecture

Godam is like a warehouse, where you store all your information. It has rooms which can be used to store data of particular type.

# Installation

```
npm i godam
```

# Framework support

Godam is very generic store framework, which can be used in any front end or backend framework.

We have created official plugin support for below library or frameworks -

* React - https://github.com/ujjwalguptaofficial/godam-react
* Vue - https://github.com/ujjwalguptaofficial/godam-vue
* Mahal - https://github.com/ujjwalguptaofficial/mahal-store

# Docs

Godam has five important parts -

* State
* Mutation
* Expression
* Task
* Room

## State

State can be used to store the value.

### Create state

```
class MyState{

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

}
```

```
import {Godam} from "godam";

const myStore = new Godam({
state : MyState
})
```

### Get state from store

```
myStore.get('name');
```

## Mutation

Mutation can be used to mutate(change) the state value. Mutation is always synchronous and do not return any result.

### Create mutation

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

class MyMutation extends Mutation{

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

```
import {Godam} from "godam";

const myStore = new Godam({
state : MyState,
mutation: MyMutation,
})
```

### Use mutation

```
myStore.set('name', 'Ujjwal kr gupta');

```

## Expression

Expression can be used to derive a value from state.

### Create expression

```
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} from "godam";

const myStore = new Godam({
state : MyState,
mutation: MyMutation,
expression: MyExpression
})
```

### Use expression

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

## Computed

Computed are expressions which are cached. So they will be called only when state changes.

Computed can be used to increase performance.

> Computed can not accept parameters.

### Create computed

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

class MyExpression extends Expression {

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

or

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

class MyExpression extends Expression {

constructor(){
this.markComputed("nameLength", 'name');
}

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

## Task

Any logic which requires lots of store manipulation can be created as task. A Task has access to - `state` , `mutation`, `expression`.

Task can be made asychronous by returning promise.

### Create task

```
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} from "godam";

const myStore = new Godam({
state : MyState,
mutation: MyMutation,
expression: MyExpression,
task: MyTask
})
```

### Use task

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

## Room

Room can be used to modularized the store.

### Create Room

```
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
})
```

```
const myStore = new Godam({
state : MyState,
mutation: MyMutation,
expression: MyExpression,
task: MyTask,
rooms: {
account: accountRoom
}
})
```

### Access room

#### State

```
myStore.get('id@account');
```

#### Mutation

```
myStore.set('id@account', 1);
```

#### Expression

```
myStore.eval('@');
```

#### Task

```
myStore.do('@');
```