Global State

App.js

import React from 'react';
import { globalStore } from './global';

const languages = { en: 'en', fr: 'fr' };

const { Provider: AppProvider, Consumer: AppConsumer } = React.createContext({});

const App = () => {

    const init = { lang: 'en', color: 'blue', count: 20 }

    return (
        <AppProvider value={globalStore(init)}>
            <LanguagePicker />
            <Menu />
        </AppProvider>
    );
}

const Menu = () => 
    <div>
        <Lang />
        <Color />
        <Default />
    </div>;

const LanguagePicker = () =>
    <AppConsumer>
        {store =>
            <div>
                <button onClick={() => store.set('lang', languages.en)}>English</button>
                <button onClick={() => store.set('lang', languages.fr)}>French</button>
            </div>
        }
    </AppConsumer>

const Lang = () =>
    <AppConsumer>
        {store => <p>Locale: {store.get('lang')}</p> }
    </AppConsumer>

const Color = () =>
    <AppConsumer>
        {store => <p>Color: {store.get('color')}</p>}
    </AppConsumer>

const Default = () =><p>Not a consumer</p>;

export default App;

global.js

import React, { useState, useContext, useReducer } from 'react';

export const globalStore = (init) => {
    const store = {};
    Object.entries(init).forEach(prop => {
        const [key, value] = prop;
        const hook = useState(value);
        store[key] = { get: hook[0], set: hook[1] }
    });

    const get = (path) => store[path].get;
    const set = (path, value) => store[path].set(value);
    // const init = () => { }
    return { get, set }
}