StencilJS State Management Tips
1 min read

StencilJS State Management Tips

description: Advanced State management without Redux, Mobs, or Stencil State Tunnel.


Example with Stencil.js v0.16.x .

Root Component

import { Component } from '@stencil/core';

export interface User {
  name: string;
}

@Component({
  tag: 'app-root'
})
export class AppRoot {

  postService: PostService;

  @State() user: User;

  constructor(){
    this.postService = new PostService();
  }

  signOut = () => {
      this.user = null;
    }

  signIn = () => {
      this.user = { name: "Pablo" }
    }

  render() {
    return (
      <div>
        <header>
          <h1>Stencil App Starter</h1>
        </header>

        { this.user && <span> Your are connected {this.user.name}. </span> }
        <main>
          <stencil-router>
            <stencil-route-switch scrollTopOffset={0}>
              <stencil-route url='/' component='app-home' exact={true} />
              <stencil-route url='/profile' component='app-profile' componentsProps={{user: this.user, signIn : this.signIn, signOut : this.signout }}/>
            </stencil-route-switch>
          </stencil-router>
        </main>
      </div>
    );
  }
}

Profile Page


import { Component, Prop } from '@stencil/core';

@Component({
  tag: 'app-profile'
})
export class AppProfile {
  @Prop() user: User;
  @Prop() signIn: Function;
  @Prop() signOut: Function;

  render() {
      return (
        <div class="app-profile">
          <p>
            Hello! My name is {this.user && this.user.name}. My name was passed in
            through a @Prop!
          </p>

          <button onClick={this.signIn}>Sign In</button>
          <button onClick={this.signOut}>Sign Out</button>
        </div>
      );
  }
}

Resources :

Real world example application built with Stencil.js :

https://github.com/hcavalieri/stencil-realworld-app

Enjoying these posts? Subscribe for more