js.js

//pohoda, žádnej callback

const fn = (props) => {
  return div({
  }, props.text)
}


// budu chtít zařídit to, aby se po kliknutí něco stalo
props.onClick = (event) => { //pičoviny }
  
const fn = (props) => {
  return div({
    onClick: props.onClick,
  }, props.text)
}

//pořád pohoda

//budu potřebovat poslat informaci, na co se kliklo, třeba nějaké ID
// ale jak to mám dostat nahoru do callbacku?
props.onClick = (event) => { //pičoviny }
  
const fn = (props) => {
  const handler = () => {
     props.onClick(props.id)
  }
  
  return div({
    onClick: handler,
  }, props.text)
}

// hotovo...

// oh wait, dy to je to ale naprosto stejné jako tady
const fn = (props) => {
  return div({
    onClick: () => props.onClick(props.id),
  }, props.text)
}

// naprosto stejnej kod, ne?
// tak jak se z toho dostat?
// no nijak, máš na výběr - buďto se něco mění (použiješ nějakou třídu a její instance pak slouží jako jednotlivé komponenty po celé stránce)
// nebo budeš pořád dokola něco "vytvářet" - typicky funkce nebo objekty. To má za následek toho, se zbavíš instancí (stavu),
// alez ase to bude žrát víc paměti, pře furt vytvářit něco nového.
// jaké použít řešení? Je to jedno, paměti je dost a bez tříd se zbavíš stavu. Ale zase je pro lidi těžko čitelný takovýhle kod
const createDisptach = (initialsState, reducer, renderFn) => {
  return (action) => {
    const nextState = reducer(initialState, action)
    return renderFn(nextState, createDispatch(nextState, reducer, renderFn))
  }
}


const renderApp = (state, dispatch) => {
 return div({
   onClick: () => dispatch({ ... })
 }, state.text) 
}

reducer = (state, action) => state
            
const dispatch = createDispatch({text: 'ahoj'}, reducer, renderApp)
dispatch({
  'TYPE': '@@INIT@@',
})

// hurá máme Redux
// Napsat to ve třídách je prostě čitelnější