{
    // Everything inside this scope has access to filter and tags. This is our root UI component.
    let filter = ''
    let tags = []

    // Imagine the following scopes are a list of to-do task components:
    [
        {
            // Everything inside this scope has access to isSelected - plus all parent variables.
            let isSelected = true
        },
        {
            // This also has isSelected inside its scope and access to parent variables, but
            // we want isSelected to be in a separate scope that can be manipulated independently from other
            // siblings.
            let isSelected = false
        }
    ]
}

const uiConfig = {
    key: 'SomeComponent', // or as a function, e.g. props => `SomeComponent:${props.id}`
    persist: true,
    state: {
        uiVar1: '',
        uiVar2: (props, state) => state.router.location.query.searchTerm
    },
    reducer: (state, action) => {
        switch( action.type ) {
            case '@@reduxReactRouter/routerDidChange':
                if ( action.payload.location.query.extra_filters ) {
                    return {
                        ...state,
                        extraFilters: true
                    }
                }
                return state
            default:
                return state
        }
    },
    mergeProps: () => ({}),
    options: {}
}

// rootReducer.js
import { combineReducers } from 'redux'
import { reducer as ui } from 'react-redux-ui-tools'

const createRootReducer = reducers => {
    return combineReducers( {
        ...reducers,
        ui,
    } )
}

export default createRootReducer

// SomeComponent.js
import React, { Component } from 'react'
import ui from 'react-redux-ui-tools'

class SomeComponent extends Component {
    render() {
        const {
            someUIFlag,
            updateUI,
            resetUI
        } = this.props.ui

        return (
            <button onClick={updateUI('someUiFlag', !someUiFlag)}>
                Toggle flag in UI state
            </button>

            <button onClick={resetUI()}>
                Reset UI state
            </button>
        )
    }
}

const uiConfig = { /* as above */ }

export default ui( uiConfig )( SomeComponent )

import { combineReducers } from 'redux'
import { Map } from 'immutable'
import { reducer as ui } from 'react-redux-ui-tools'

const createRootReducer = reducers => {
    return combineReducers( {
        ...reducers,
        ui: (state, action) => ui( state, action, Map )
    } )
}

export default createRootReducer

// SomeComponent.js
import React, { Component } from 'react'
import ui from 'react-redux-ui-tools'

const uiConfig = { /* as above */ }

@ui( uiConfig )
class SomeComponent extends Component {
    render() {
        const {
            someUIFlag,
            updateUI,
            resetUI
        } = this.props.ui

        return (
            <button onClick={updateUI('someUiFlag', !someUiFlag)}>
                Toggle flag in UI state
            </button>

            <button onClick={resetUI()}>
                Reset UI state
            </button>
        )
    }
}

export default SomeComponent

import React, { Component } from 'react'
import ui from 'react-redux-ui-tools'

// Component A gets its own context with the default UI state below.
// this.props.ui will contain this state map.
@ui( {
    state: {
        // use the filter query parma via redux-router as the default
        filter: (props, state) => state.router.location.query.filter,
        isFormVisible: true,
        isBackgroundRed: false
    }
} )
class A extends Component {
    render() {
        return (
            <div>
                // This will render '{ "filter": '', isFormVisible: true, isBackgroundRed: false }'
                <pre><code>{ this.props.ui }</code></pre>

                // Render child B
                <B />
            </div>
        )
    }
}

// B inherits context from A and adds its own context.
// This means that this.props.ui still contains A's state map.
@ui()
class B extends Component {
    render() {
        return (
            <C />
        )
    }
}

// C inherits context from its parent B. This works recursively,
// therefore C's this.props.ui has the state map from A plus someChildProp.
// Setting variables within C updates within the context of A; all UI
// components connected to this UI key will receive the new props.
@ui( {
    state: {
        someChildProp: 'foo'
    }
} )
class C extends Component {
    render() {
        return (
            <div>
                <p>I have my own UI state C and inherit UI state from B and A</p>
                <p>
                    If I define variables which collide with B or A mine will
                    be used, as it is the most specific context.
                </p>
            </div>
        )
    }
}