StateStoreBestPractice.js

/* DEPRECATED
getComponentState(id) {}
setComponentState(id, state) {}
onComponentStateUpdated(id, state) {}
*/

constructor(StateStore){
  // this.name - Name of the component. Should be unique, better to link to parent view name. 
  // For example for jobDetailView it will be "JobsTableJobDetailView"
  // state
  this.state = {
    data: [],
    searchFields: [],
    // ....
  };
  // setting default component state (muted - third param, no trigger to children)
  // also muted update should be used inside StateStore.listen function
  this.stateStore.setViewState(this.name, this.state, true);
  
  // keys_changed used to determine which data was update, 
  // to not rerun everytime some massive data filtering for example
  StateStore.listen((event, keys_changed) => {
    if (event === `${self.name}StateUpdated`) {
      self.state = StateStore.getViewState(self.name);
      // update data
      if (keys_changed.indexOf('data') !== -1) {
        self._setJobs(self.state.data);
        if (self.state.data.length)
          self.loading = false;
      }
    }
  );
  
  // WARN: Also if you use some children components then you should update their state after they are initialized.
  // So you can initialize them dinamically like this: 
  _.forEach($element.find('div'), (node) => {
    if (node.className.indexOf('side-component') !== -1) {
      angular.element(node).append(
        $compile(
          `<${self.state.sidePaneComponent.name} name="${vm.sidePaneComponentName}"></${self.state.sidePaneComponent.name}>`
        )($scope)
      );  
      StateStore.setViewState(self.sidePaneComponentName, {
        options: self.state.sidePaneComponent.options
      });
    }
  });
  // or to use setTimeout to run update after constructor.
  
  onClickRow(itemId) {
    // this will emmit trigger with name like JobsTableItemClicked (if this.name == "JobsTable")
    // this used for some actions that has no state like callbacks
    this.stateStore.emit(this.name, 'itemClicked', itemId);
  }
  
}