Consider including HistoryState

[benglass]

import { State } from '@symbiotic/green-state';

export class HistoryState extends State {
    constructor({ history }){
        const getQueryParams = () => {
            const { location } = history;
            const result = {};
            for (let [key, value] of new URLSearchParams(location.search).entries()){
                result[key] = value;
            }
            return result;
        }
        super({
            queryParams: getQueryParams()
        });
        history.listen(() => {
            this.setState({ queryParams : getQueryParams() });
        });
        this.setQueryParam = (key, value) => {
            const { queryParams } = this.get();
            const queryParamsCopy = { ...queryParams };
            if(value === null){
                delete queryParamsCopy[key];
            }
            else {
                queryParamsCopy[key] = encodeURIComponent(value);
            }
            const queryString = new URLSearchParams(queryParamsCopy).toString();
            history.push(`${history.location.pathname}?${queryString}`)
        }
    }
}

[benglass]

What other events happen in the browser that might be useful to model as a state?

• History
• Viewport/Window Resize