simon_counter2.js

simon_counter2.js

const foo1 = () => { this.rawr = "rawr" }
function foo2 () { this.rawr = "rawr" }

function moo2 () { this.rawr = "moo" }
function resetRawr () { this.rawr = "rawr" }
function setRawr (value) { this.rawr = value }

const rawrStuff = { moo2: moo2, resetRawr: resetRawr, setRawr: setRawr }

foo1()


function Foo () {
  this.rawr = "rawr"
  this.resetRawr = function () { this.rawr = "rawr"}
}

Foo.prototype.changeRawr = function (value) { this.rawr = value }


const foo = new Foo()
foo.changeRawr("omg")

Object.assign(foo.prototype, rawrStuff, { foo2 })

foo.rawr // "omg"


foo.moo2()




class Foo extends React.Componet{
  constructor (props) {
    super(props)
    this.rawr = "rawr"
  }

  resetRawr = function () {  this.rawr = "rawr" }

  changeRawr(value) { this.rawr = value }
}





import { createStore } from 'fe-lib-store'
import { connect } from 'fe-hoc-connect'
import { compose } from 'fe-hoc-compose'

const initialState = {
  counterOne: 0,
  counterTwo: 0,
  counterThree: 0,
}

const { store } = createStore('counters', {}, initialState)

const connect = (store, mapState) => Comp => {
  return class extends React.Component {
    componentDidMount () {
      this.mount = true
      this.unsub = store.subscribe(() => this.mount && this.forceUpdate())
    }

    componentWillUnmount () {
      this.mount = false
      this.unsub()
    }

    render () {
      return <Comp {...this.props} {...mapState(store.getState(), this.props)}/>
    }
  }
}

const Btn = ({ children, onClick }) =>
  <button onClick={onClick}>
    { children }
  </button>

const Text = ({ children }) =>
  <strong>{ children }</strong>

const Counter = ({ count, onInc, onDec }) =>
  <div>
    <Text>{count}</Text>
    { onDec && <Btn onClick={onDec}>-</Btn> }
    { onInc && <Btn onClick={onInc}>+</Btn> }
  </div>

const ConnectedCounter = connect(store, (state, { id }) => ({
  count: state[id],
}))(Counter)

const Counters = ({ counters, total }) =>
  <div>
    <Title total={total}>Count</Title>
    { counters.map(id => <ConnectedCounter id={id}/>) }
  </div>

const ConnectedCounters = compose(
  connect(otherStore, (state, props) => ({
    activeCounter: state.activeCounter,
  })),
  connect(store, (state, props) => ({
    counters: Object.keys(state),
    total: Object.keys(state).map(id => state[id]).reduce((a, b) => a+b),
  }))
)(Counters)

<ConnectedCounters/>