CounterPa

import React from 'react'
import {connect, forwardTo, updateProperty, actionFor} from './core'
import * as Counter from './Counter'

// CONSTANTS
export const TOP = '@@TOP'
export const BOTTOM = '@@BOTTOM'

// ACTIONS
export const getTopState = state => state.top
export const getBottomState = state => state.bottom

// REDUCER
const initialState = {
    top: Counter.reducer(),
    bottom: Counter.reducer()
}
export const reducer = (state = initialState, action) => {
    // update child states
    state = updateProperty(state, 'top', Counter.reducer(state.top, actionFor(TOP, action)))
    state = updateProperty(state, 'bottom', Counter.reducer(state.bottom, actionFor(BOTTOM, action)))

    // here you can perform additional state reducing (e.g. switch action.type etc...)
    return state
}

// VIEW
export const view = connect()(
    ({name, dispatch}) => <div>
        <h3>{name}</h3>
        <Counter.view name="Like" selector={getTopState} dispatch={forwardTo(TOP, dispatch)} />
        <Counter.view name="Hate" selector={getBottomState} dispatch={forwardTo(BOTTOM, dispatch)} />
    </div>
)