effects are magically part of reducers

I’m planning on giving a HyperApp presentation to the other developers at work. When I explain effects, I’m going to have a sample running in codepen similar to this:

app({  
  model: { 
      city: "", 
      wx: { } 
  },
  reducers: {
    setCity: (model, e) => ({ city: e.currentTarget.value }),
    setWeather : (model, formattedData ) => ({ wx: formattedData })    
  },
  effects: {
     getWeather : (model, reducers) => {
          axios.get'http://api.openweathermap.org/data/2.5/weather'....
              reducers.setWeather(obj);            
          })
      }
  },
  view: (model, reducers) => (
      <div>      
        <input type="text" oninput={ (e) => ( reducers.setCity(e)) } />
        <input type="button" value="Get Weather" onclick={ _ => reducers.getWeather() } />
        { Object.keys(model.wx).map((key, index) => (<div>{key} : {model.wx[key]} </div>)) }      
      </div>
   )  
})

The part that they are going to be questioning is this:

        <input type="text" oninput={ (e) => ( reducers.setCity(e)) } />
        <input type="button" value="Get Weather" onclick={ _ => reducers.getWeather() } />

Since reducers are passed into the view and not the effects… how is it that we can call reducers .getWeather() and it magically uses the effect? How do I explain this eloquently - or can I change the code to make it not seem so magic?

Thanks, Chad

[jorgebucaran]

@cdeutmeyer Thanks for the question! This point is now well explained in the docs. I added cross-ref links and hinted that both reducers and effects conform what HyperApp calls actions.

• https://github.com/hyperapp/hyperapp/wiki/api#reducers
• https://github.com/hyperapp/hyperapp/wiki/api#effects

[cdeutmeyer]

thanks @dodekeract!! I’m kinda new at making posts!