easy-peasy-classes

easy-peasy-classes is a simple package that gives you the abiliy to write your easy-peasy models with typescript classes and decorators. Giving you an easy and concise way to build your store and getting code autocompletion + type safety. easy-peasy-classes is heavily inspired by erencay's easy-peasy-decorators package. The approach slithy differs in order to add some new features.

Disclaimer

This package (and its documentation) is still under development and is not suitable for use yet.

||easy-peasy-classes|easy-peasy-decorators| | :--- | :---: | :---: | | No need for a duplicate definition of the model and its interface | ✓ | ✓ | | Autocompletion when accessing state and actions, even for reusable store models | ✓ | ✓ | | No need to import/export your models throughout your project | - | ✓ | | No need to extend every model from a base class | - | ✓ | | Ability to mix with classic easy-peasy model definitions | ✓ | - | | Convenient for deeply nested store structure | ✓ | - | | Ability to define resusable models | ✓ | - | | Class inheritence for models / Definition | ✓ | - | | this.getStoreState() and this.getStoreActions() helpers | ✓ | - | |Possibilty to define a this.resetState() helper| ✓ | - |

Installation

npm install easy-peasy easy-peasy-classes
# or
yarn add easy-peasy easy-peasy-classes

Basic usage

easy-peasy-classes comes with 7 decorators

| | | | --- | --- | |@Model|Required on top of every class model| |@Property|State value or sub-model| |@Child|Same as @Property but enforce that useStoreState hook will get every @Property or @Child individually. More details here | |@Action|| |@Thunk|| |@Computed|| |@Listener()||

Reusable models

In classic easy-peasy, a reusable models is a model wrapped in a function. This way you can duplicate it. This is usefull if you have multiple components that have the same behaviour but not the same state values.

With classic easy-peasy syntax

//Reusable model definition
const CheckboxReusable = ()=>({
  isChecked: false,
  toggle: action((state, payload) => {
    state.isChecked = !state.isChecked);
  }),
})

//Usage in a parent model
export const ListModel = {
    consentmentCheckbox: CheckboxReusable(),
    newsletterCheckbox: CheckboxReusable()
}

//Reusable model definition
@Model
class CheckboxReusable extends BaseModel {

    @Property
    isChecked: boolean = false

    @Action
    toggle(){
        this.isChecked = !this.isChecked
    }
}

//Usage in a parent model
@Model
export class ListModel extends BaseModel{
    
    @Child
    consentmentCheckbox: CheckboxReusable = CheckboxReusable.obj
    
    
    @Child
    newsletterCheckbox: CheckboxReusable = CheckboxReusable.obj
    
}


//or  with classic easy-peasy
export const ListModel = {
    consentmentCheckbox: CheckboxReusable.obj as CheckboxReusable,
    newsletterCheckbox: CheckboxReusable.obj as CheckboxReusable
}

@Child