// ./App/context.js
import createAppContext from 'react-context-mutation';
import state from './state'; // initial state tree
import configReducer from './config-reducer'; // pre reduce config function

export default createAppContext(state, configReducer)

// ./App/index.js
import AppContext from './context'
import Header from './Header'

const { AppProvider, AppConsumer } = AppContext

export default function App() {
  return (
    <AppProvider>
      <AppConsumer>
        {({ context, useActions }) => (
          <Layout>
            <Header context={context} useActions={useActions} />
            <Layout>
              <Sider context={context} useActions={useActions} />
              <Content>
                <Router />
              </Content>
            </Layout>
          </Layout>
        )}
      </AppConsumer>
    </AppProvider>
  )
}

// ./App/state.js
export default { // initial state tree
  app: {},
  header: {},
  sider: {},
}

// ./App/config-reducer.js
export default function configReducer({ app = {}, header = {}, sider = {} }) { // pre reduce config function
  return (state) => ({
    app: mergeAppConfig(app, state.app),
    sider: mergeSiderConfig(sider, state.sider),
    header: mergeHeaderConfig(header, state.header),
  })
}

// ./Header/index.js
import createActions from './actions';

export default function Header(props) {
  const { context, useActions } = props;
  const { menu, currentItem } = context.header;
  const actions = useActions(createActions); // actions is immutable

  const handleMenuChange = useCallback((currentItem) => {
    actions.changeCurrent(currentItem)
  }, [actions]); // actions is immutable

  return (
    <header>
      <Menu menu={menu} currentItem={currentItem} onMenuChange={handleMenuChange} />
    </header>
  )
}

// ./Header/actions.js
export default (mutation, contextRef) => ({ // `mutation`and`contextRef` from closure
  changeCurrent(currentItem) {
    // you can fetch data hear
    mutation.header(() => ({ currentItem }));
    // await for fetch has done, mutation the header context value then
  }
})