// 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) => {
})