As part of modern Web applications, state management cannot be put aside, as it’s not a simple aspect of complement but a very important piece that applications cannot live without, especially when it comes to a modularized frontend. See this video for hands-on practice: YouTube video. YouTube video. YouTube video. YouTube video Follow the official documentation: Still.js Service Doc. Still.js Service Doc. Still.js Service Doc. Still.js Service Doc Join the Discord channel if you have further questions: Discord channel. Discord channel. Discord channel. Discord channel Still.js provides different ways to handle state management (component/local state management video); therefore, when it comes to global state management, it provides built-in features called Services, thereby making it possible to handle things in a Reactive way. Follow the illustration below on how it works behind the scenes: Still.js Still.js Still.js What is a Service in Still.js? This is a piece in the code placed in the most extreme layer in terms of architecture, thereby allowing external communication through means like API/HTTP. Services also had the ServiceEvent kind of variables that are declared as follows: import { BaseService, ServiceEvent } from "../../@still/component/super/service/BaseService.js";

//This class will be places in the app/services/ folder
export class BiddingService extends BaseService {
    /** An array with a single country is being assigner */
    countryStore = new ServiceEvent(['Australia']);
} import { BaseService, ServiceEvent } from "../../@still/component/super/service/BaseService.js";

//This class will be places in the app/services/ folder
export class BiddingService extends BaseService {
    /** An array with a single country is being assigner */
    countryStore = new ServiceEvent(['Australia']);
} In Still.js, all services must extend the BaseService class to be injectable into components. Reactive stores have to use the ServiceEvent type. After creating a service, it should be injected using @Inject, and components can then listen to specific data changes from stores (e.g., countryStore from the above code): Still.js Still.js import { ViewComponent } from "../../../@still/component/super/ViewComponent.js";
import { BiddingService } from '../../service/BiddingService.js';

export class BiddingDisplay extends ViewComponent {

    isPublic = true;

    /** 
     * @Inject
     * @Path services/
     * @type { BiddingService } */
     bService;

     stAfterInit() {
          this.bService.on('load', () => { //Check service readiness
               //Bellow, it Subscribe to ServiceEvent variable (countryStore)
               this.bService.countryStore.onChange(newValue => {
                     console.warn(`New country entered the Bid, follow the list: `, newValue);
               });
           });
      }
} import { ViewComponent } from "../../../@still/component/super/ViewComponent.js";
import { BiddingService } from '../../service/BiddingService.js';

export class BiddingDisplay extends ViewComponent {

    isPublic = true;

    /** 
     * @Inject
     * @Path services/
     * @type { BiddingService } */
     bService;

     stAfterInit() {
          this.bService.on('load', () => { //Check service readiness
               //Bellow, it Subscribe to ServiceEvent variable (countryStore)
               this.bService.countryStore.onChange(newValue => {
                     console.warn(`New country entered the Bid, follow the list: `, newValue);
               });
           });
      }
} In the above example, we are specifying the path (folder) where the service is located, but this can be defined globally at the App level. Still.js uses event-based reactive state management, where components subscribe via the onChange event. Any change to the state triggers notifications to all subscribers, regardless of where the change originated. Still.js Still.js Retrieving value from the service is quite straightforward, as we only need to specify the store and put .value at the end as follows: getCountryInTheBid() {
    const countryState = this.bService.countryStore.value;
    console.log(`----> Country Store before updating: `, countryState);
} getCountryInTheBid() {
    const countryState = this.bService.countryStore.value;
    console.log(`----> Country Store before updating: `, countryState);
} Updating a store is also a simple thing; in some cases, we have to use some intermediate variables. This is the case for lists; follow the examples: addMoreCountry() {

  /** Retrieve the state */
  const countryState = this.bService.countryStore.value;

  /** Updating the store and re-assigning it to the service */
  countryState.push(‘Madagascar’);
  this.bService.countryStore = countryState;
} addMoreCountry() {

  /** Retrieve the state */
  const countryState = this.bService.countryStore.value;

  /** Updating the store and re-assigning it to the service */
  countryState.push(‘Madagascar’);
  this.bService.countryStore = countryState;
} Conclusion Conclusion Do not forget to check the video tutorial. the video tutorial the video tutorial Still.js uses event-based reactive state management that simplifies setup by requiring only services and ServiceEvent-based stores. Components can inject these and implement their own logic, while any centralized logic can be handled in the main component. Still.js Still.js See you in the next one 👊🏽

Discord

Getting Started With State Management in Still.js

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

8 Steps to Embedding Microfrontends in React with Still.js

The AI Revolution: Reimagining Governance, Society, and Human Consciousness in the 21st Century

3 Basic Principles You MUST Know Before Using Redux

5 JavaScript Trends To Watch Out In 2020

A Guide to State Management in Angular Using Ngrx (Version 12)

Advanced Tricks in React Native Programming for Mobile Development

8 Steps to Embedding Microfrontends in React with Still.js

The AI Revolution: Reimagining Governance, Society, and Human Consciousness in the 21st Century

3 Basic Principles You MUST Know Before Using Redux

5 JavaScript Trends To Watch Out In 2020

A Guide to State Management in Angular Using Ngrx (Version 12)

Advanced Tricks in React Native Programming for Mobile Development

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps