Search code examples
typescriptvaadindecoratorweb-componentlit-element

How use @property decorator syntax in litElement when there are properties from the redux


when we use constructor assign @property decoratort looks like

@property ({type: String}) name = 'Luis';

and its work fine but when I use redux and therefore _stateChanged for it I try use

@property ({type: String}) name

without name value because value defines in _stateChanged function so how make it works together

I find a lot of example where people use this decorator like this

export class MyElement extends LitElement {
 

     @property({type: String}) propertyName = "name"

and it works instead constructor definition, but in my case I have _stateChanged function and when I write code like this, it dont work like it should be, please give me example usage this decorators with _stateChanged(redux)


Solution

  • You can keep using the regular @property regardless of whether the value is set from the outside or internally from e.g. Redux. The type information is only there to let LitElement populate the property value based on an attribute but it's ignored as long as attribute with the same name is set.

    You can also use @internalProperty that doesn't require you to define type and also doesn't reflect the property to an attribute with the same name.