onRoute hooks?

I’m facing a problem where I need to fetch data when I enter different routes

Here’s an example with just a single view that needs to fetch data. In reality I will have multiple views, and model.items will change on different views.

I’m not sure how to achieve this functionality without onRoute hooks.

example

const { h, app } = hyperapp
/** @jsx h */

app({
  model: {
    items: []
  },
  reducers: {
    updateItems: (model, data) => ({
      items: data
    })
  },
  effects: {
    fetch: (model, actions) => {
      setTimeout(function () {
        actions.updateItems([1, 2, 3])
      },0)
    }
  },
  view: (model, actions) => {
    /* I need to asynchronously fetch items only one time when I enter routes.
    If I call an effect here in the view, it will rerender infinitely
    since reducers update the model and cause views to render
    */
    actions.fetch()
    
    console.log('this is logged on every render')
    
    return (
      <div>{model.items}</div>
    )
  } 
})

[jacobtipp]

Everything is cleared up, thanks!

[FlorianWendelborn]

@traducer

app({
	actions: {
		fetch (model, actions) =>
			console.log(`fetching ${model.router.params.id}`)
		,
		customGo: (model, actions, path) => {
			actions.router.go(path)
			actions.fetch()
		}
	},
	subscriptions: [
		(model, actions) => actions.fetch()
	]
})