Components with Actions

Next we need to tell component that it will use TodoActions . We are doing this by decorating component with @ComponentState decorator

@ComponentState(TodoStateActions)
export class TodoDescription extends ReactComponentWithStateActions<any, any, TodoStateActions> {
    render(){
        return <div>{ this.actions.todoDescriptionAsync }</div>
    }
}

or if you do not like provided base class you can do this

@ComponentState(TodoStateActions)
export class TodoDescription extends React.Component implements HasStateActions<TodoStateActions> {
    actions: StorageStateActions;
    statePath: any;
    stateIndex?: string | number; // optional variable
    
    render(){
        return <div>{ this.actions.todoDescriptionAsync }</div>
    }
}

In this step three properties will be available from base class

• statePath - current state path that component is manipulating with

• actions - previously created actions class

• stateIndex - index item of the state if state is an array.

For example if we are iterating through todos and repeating repeating todo.component we need to pass not only statePath but stateIndex as well because statePath is todos and stateIndex will be n So final path inside of todo.component will look like todos[stateIndex]

<TodoDescription statePath={this.statePath} stateIndex={index} />

stateIndex can also be set for in cases like when you want to pass item index via URL and want to load state according to it. More documentation on section: Passing list item index via router