My Global state management

global.js

class GlobalState{
    constructor(){
        this.foo = true;
        this.observers = [];
    }

    _mutateFoo(foo){
        this.foo = foo;
        for(let component of this.observers){
            component.setState({foo: this.foo});
        }
    }

    actionFoo(foo){
        this._mutateFoo(foo);
    }

    subscribeState(component){
        this.observers.push(component);
        component.setState({
           foo: this.foo
       });
    }

    unsubscribeState(component){
        for(let i in this.observers){
            if(this.observers[i] === component){
                this.observers.splice(i,1);
                break;
            }
        }
    }
}

screen_foo.js

import global from './global'

class FooScreen extends Component{
  constructor(){
    this.state = {
      foo: false,
    };
  }

  componentDidMount(){
    global.subscribeState(this);
  }
  
  componentWillUnmount(){
    global.unsubscribeState(this);
  }

  onBar() {
    global.actionFoo(true);
  }
}