Getter Components

GetterComponents.jsx

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component, PureComponent } from 'react';
import {
  Platform,
  Text,
  TouchableHighlight,
  View
} from 'react-native';
import { createStore } from 'redux'
import { Provider, connect } from 'react-redux'

const rootReducer = (state, action) => {
  switch (action.type) {
    case 'INCREMENT_A': {
      return {...state, countA: state.countA + 1}
    }
    case 'INCREMENT_B': {
      return {...state, countB: state.countB + 1}
    }
    default:
      return state
  }
}
const store = createStore(rootReducer, { countA: 0, countB: 0 })

class FlipInput extends PureComponent<any> {
  render () {
    console.log(`FLIP_INPUT_RENDER ${this.props.id}`)
    return <Text>{this.props.count}</Text>
  }
}

class ExchangedFlipInput extends PureComponent<any> {
  render () {
    console.log('EXCHANGED_FLIP_INPUT_RENDER')
    return <View>
      <TouchableHighlight onPress={this.props.increment}>
        <Text>INCREMENT REDUX</Text>
      </TouchableHighlight>

      {this.props.children}
    </View>
  }
}

class MyPureComponent extends PureComponent<any> {
  render () {
    const { children, ...props } = this.props
    return children(props)
  }
}
const GetAState = connect((state) => ({ count: state.countA }))(MyPureComponent)
const GetADispatch = connect(null, (dispatch) => ({ increment: () => dispatch({ type: 'INCREMENT_A' }) }))(MyPureComponent)

const GetBState = connect((state) => ({ count: state.countB }))(MyPureComponent)
const GetBDispatch = connect(null, (dispatch) => ({ increment: () => dispatch({ type: 'INCREMENT_B' }) }))(MyPureComponent)

type Props = {};
export default class App extends PureComponent<Props> {
  render() {
    console.log('ROOT RENDER')
    return (
      <Provider store={store}>

        <View style={{ padding: 100 }}>
          <GetADispatch>{({ increment }) =>
            <ExchangedFlipInput increment={increment}>
              <GetAState>{({ count }) =>
                <FlipInput count={count} id={'A'}/>
              }</GetAState>
            </ExchangedFlipInput>
          }</GetADispatch>


          <GetBDispatch>{({ increment }) =>
            <ExchangedFlipInput increment={increment}>
              <GetBState>{({ count }) =>
                <FlipInput count={count} id={'B'} />
              }</GetBState>
            </ExchangedFlipInput>
          }</GetBDispatch>
        </View>

      </Provider>
    );
  }
}