Skip to content

Instantly share code, notes, and snippets.

@Guria
Last active April 5, 2017 14:35
Show Gist options
  • Save Guria/d7b39fec604c31103d6fe51c5ce1b13b to your computer and use it in GitHub Desktop.
Save Guria/d7b39fec604c31103d6fe51c5ce1b13b to your computer and use it in GitHub Desktop.
// Define state and state updates
function ReduxState (state = Immutable.fromJS({items: []}), action) {
  switch (actions.type) {
    case 'addItem':
      return state.push('items', action.item)
  }

  return state
}

// Components
const Items = connect(
  (state) => ({ items: state.items }),
  (dispatch) => ({
    onClick: (item) => dispatch({type: 'addItem', item})
  })
)(
  function ItemsComponent ({items, onClick}) {
    return (
      <div>
        <ul>{items.map((item) => <li>{item}</li>)}</ul>
        <button onClick={() => onClick('foo')}>Add foo</button>
      </div>
    )
  }
)

// Pass state to components
const store = createStore(ReduxState)
render(
  <Provider store={store}><Items /></Provider>,
  document.getElementById('root')
)
const controller = Controller({
  state: {
    items: []
  },
  signals: {
    itemAdded: push(state`items`, props`item`)
  }
})

// Components
const Items = connect({
  items: state`items`,
  itemAdded: signal`itemAdded`
},
  function ItemsComponent ({items, itemAdded}) {
    return (
      <div>
        <ul>{items.map((item) => <li>{item}</li>)}</ul>
        <button onClick={() => itemAdded({item: 'foo'})}>
          Add foo
        </button>
      </div>
    )
  }
)

// Pass state to components
render((
  <Container controller={controller}><Items /></Container>
), document.querySelector('#app'))
startFunctionTreeFlow({
  bananasUrl: '/bananas',
  applesUrl: '/apples'
}, [
  hasBananasUrl, {
    true: getBananas,
    false: []
  },
  getApples,
  createBasket,
  set('fruitBasket', 'basket')
])
  .catch((error) => {

  })
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment