Getting Started With State Management in Still.js

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.

Follow the official documentation: Still.js Service Doc.

Join the Discord channel if you have further questions: 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:

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']);
}

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):

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.

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);
}

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;
}

Conclusion

Do not forget to check 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.

See you in the next one 👊🏽