import Huc} from 'react-huc'

<Huc initStore={{isShow: false}}>
  <Child1 />
  <Child2 />
</Huc>

//Change huc state from child
//Child1
render() {
  const {isShow} = this.props
  return (
    <div>{isShow}</div>
  )
}
//Chil2
render(){
  const {isShow, dispatch} = this.props
  return (
    <div>
    <button onClick={()=> dispatch({isShow: !isShow})}>toggle</button>
    </div>
  )
}

import { Huc } from 'react-huc'

handleToggle = () => {
  const parent = this.refs.parent
  parent.dispatch({isShow: !parent.state.isShow})
}
//change state from other component
<button onClick={()=> this.handleToggle()}></button>

<Huc initStore={{isSHow: false}} ref="parent">
  <Child1 />
  <Child2 />
</Huc>

import Huc from 'react-huc'

const withReducer = (state, action) => {
  switch(action.type) {
    case 'TOGGLE_MODAL':
      return Object.assign({},state,{isShow: !state.isShow})
    default:
      return state
  }
}

<Huc initStore={{isShow: false}} witReducer={withReducer}>
  <Child1 />
</Huc>

//Change huc state from child
//Child1
render() {
  const {isShow, dispatch} = this.props
  return (
    <div onClick={()=> dispatch({type: 'TOGGLE_MODAL'})}>{isShow}</div>
  )
}

import Huc from 'react-huc'

const withReducer = (state, action) => {
  switch(action.type) {
    case 'TOGGLE_MODAL':
      return Object.assign({},state,{isShow: !state.isShow})
    default:
      return state
  }
}

handleToggle = () => {
  const parent = this.refs.parent
  parent.dispatch({type: 'TOGGLE_MODAL'})
}
//change state from other component
<button onClick={()=> this.handleToggle()}></button>

<Huc initStore={{isSHow: false}} withReducer={withReducer} ref="parent">
  <Child1 />
</Huc>

//app.js
improt React, {Component, PropTypes} from 'react'
import {Provider} from 'react-hoc'


class App extends Component {

  setStateWithRef = (ref, data) => {
    this.refs[ref].setState(data)
  }

  render(){
    return (
      <Provider context={{app: this}}>
      <Child />
      <Count ref="count" initState={{count: 0}}/>
      </Provider>
    )
  }
}


//children component
class Child extends Component {
  static contextTypes = {
    app: PropTypes.object.isRequired
  }
  constructor(props){
    super(props)
  }
  handleAdd = () => {
    const {app, app:{refs:{navigation}}} = this.context
    app.setStateWithRef('navigation', {count: count.state.count + 1})
  }

  render(){
    return (
      <div onClick={()=> this.handleAdd()}> + </div>
    )
  }
}

class Count extends Component {
  constructor(props){
    super(props)
  }
  componentWillMount = () => {
    if(this.props.initState){
      this.state = initState
    }
  }

  render(){
    return (
      <div>{this.props.count}</div>
    )
  }
}