[Global Store in React using context] #react

contextRootChild.js

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class Root extends Component {

    static childContextTypes = {
        appState: PropTypes.func
    };

    getChildContext = () => {
        return {
            appState: this.appState
        }
    }
    
    state = {
      message: "Hello World"
    }

    appState = (objOrFunc, func) => {
        if (typeof objOrFunc === 'string') return this.state[obj];
        const isParamValid = typeof objOrFunc === 'object' || typeof obj === 'function';
        if (isParamValid === true && typeof func === 'undefined') {
            this.setState(objOrFunc);
        } else if (isParamValid === true && typeof func === 'function') {
            this.setState(objOrFunc, () => {
                func();
            })
        } else {
            return false;
        }
    }    
}

class Child extends Component {
  
    componentWillMount() {
        this.store = this.context.appState;
        typeof this.willMount === "function" && this.willMount();
    }

    static contextTypes = {
        appState: PropTypes.func
    }   
    
} 

/*
    When creating Components, make sure extends Root & Child instead of Component (only extends Root once)
    Then we can use this.store at Child. For this example:
    this.store("message") will return "Hello World"
    this.store({ message: "Hi" }) will setState Root and re-render
*/