JSFiddle - React, Tailwind, and code Playground

by mcsf

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.development.js"></script>
<div id="app"></div>

Babel + JSX

// l = (...args) => console.log(...args)

withSelectors = (() => {
  // getState, selectors, proxy are private.
  // withSelectors is the only bit exposed
  const getState = () => ({
    blocks: {
      123: { name: 'foo', uid: 123 },
    }
  })

  const selectors = {
    getBlock: (state, uid) => state.blocks[uid],
  }

  const proxy = new Proxy({}, {
    get(target, name) {
      if (! (name in target)) {
        target[name] = (...args) => selectors[name](getState(), ...args)
      }
      return target[name]
    }
  })

  const withSelectors = mapSelectors => Wrapped =>
    class extends React.Component {
      render() {
        return <Wrapped {...this.props}
          {...mapSelectors(this.props, proxy)} />
      }
    }
    
	return withSelectors
})()
  
Component = withSelectors(
  (ownProps, selectors) => ({
    block: selectors.getBlock(ownProps.uid),
  })
)(({block}) => <div>A block named {block.name}</div>)

ReactDOM.render(<Component uid={123} />, document.getElementById('app'))