/* 通过 provider 生成这个 store 对应的 connect 函数 */
const connect = provider(store)
/* 普通的 render 方法(类似React中的组件) */
let renderHeader = (props) => {
  console.log('render header')
  $('#header').html(props.header)
}
/* 用 connect 取数据传给 render 方法 */
const mapStateToProps = (state) => {
  return { header: state.header }
}
renderHeader = connect(mapStateToProps)(renderHeader)

const provider = (store) => {
  return (mapStateToProps) => { // connect 函数
    return (render) => {
        /* 返回新的渲染函数，就像 React-redux 的 connect 返回新组件 */
        const renderWrapper = () => {
            const newProps = mapStateToProps(store.getState())
            /* 如果新的结果和原来的一样，就不要重新渲染了 */
            if (shallowEqual(props, newProps)) return
            props = newProps
            render(props)
        }
        /* 监听数据变化重新渲染 */
        store.subscribe(renderWrapper)
        return renderWrapper
    }
  }
}

/* body */
let renderBody = (props) => {
  console.log('render body')
  $('#body').html(props.body)
}
mapStateToProps = (state) => {
  return { body: state.body }
}
renderBody = connect(mapStateToProps)(renderBody)
/* footer */
let renderFooter = (props) => {
  console.log('render footer')
  $('#footer').html(props.footer)
}
mapStateToProps = (state) => {
  return { footer: state.footer }
}
renderFooter = connect(mapStateToProps)(renderFooter)

function shallowEqual(left, right) {
    for (var key in left) {
        if (left[key] !== right[key]) {
            return false;
        }
    }
    return true;
}