I want to refetch data when i switch route, is the subscriptions' right place to work with?

[crapthings]

what is best practical or preferred way to get inital data when switch route ?

users.js

require('./model')

module.exports = (state, prev, send) => render`
  <div onload=${send('fetch')}> // i've got infinite render loop
    <h3>user list</h3>
    ${userForm(state, prev, send)}
    ${userList(state, prev, send)}
  </div>
`

function userList(state, prev, send) {
  return render`
    <table>
      <thead>
        <tr>
          <th width='60'>avatar</th>
          <th width='200'>name</th>
          <th width='200'>username</th>
          <th width='300'>email</th>
          <th width='200'>website</th>
          <th>phone</th>
          <th>lorem</th>
        </tr>
      </thead>
      <tbody>
        ${state.users.map((user) => render`
          <tr>
            <td>
              <img src='${user.avatar}' alt='${user.name}' class='img-avatar' />
            </td>
            <td>${user.name}</td>
            <td>${user.username}</td>
            <td>${user.email}</td>
            <td>${user.website}</td>
            <td>${user.phone}</td>
            <td>${user.lorem}</td>
          </tr>
        `)}
      </tbody>
    </table>
  `
}

function userForm(state, prev, send) {
  return render`
    <form onsubmit=${submit}>
      <input type='text' id='username' placeholder='enter an username' required autofocus />
      <input type='submit' value='submit' />
      <input type='button' value='refetch' onclick=${refetch} />
    </form>
  `

  function submit (e) {
    e.preventDefault()
    let $username = document.getElementById('username')
    send('add', { payload: { username: username.value } })
    $username.value = ''
  }

  function refetch() {
    send('fetch')
  }
}

model.js

const faker = require('faker')

const _ = require('lodash')

app.model({

  state: {
    users: []
  },

  subscriptions: [
    (send, done) => send('fetch', done)
  ], // subscriptions only happen when the page reload, not on change route

  effects: {
    fetch: (data, state, send, done) => {
      let users = _.times(10, n => {
        return _.extend(faker.helpers.userCard(), {
          avatar: faker.internet.avatar(),
          lorem: faker.lorem.sentence()
        })
      })

      send('init', { payload: users }, done)
    }
  },

  reducers: {
    init: (data, state) => {
      return {
        users: data.payload
      }
    },

    add: (data, state) => {
      return {
        users: state.users.concat(data.payload)
      }
    }
  }

})

[yoshuawuyts]

You'd want to be using https://github.com/shama/bel#lifecycle-events - they've got a few bugs at the moment, but it should get you there I reckon ✨

[crapthings]

https://github.com/crapthings/webpack-choo-undefined/blob/master/src/components/posts/index.js#L15

on-load still can't fetch data sometimes when switch route

[timwis]

@crapthings onload isn't always the same thing as switching routes -- particularly if the component with the onload hook is already mounted on the page (ie. /users/123 to /users/456). In that case, you can put some logic in your view to detect whether the state (including route params) has changed.

const view = (state, prev, send) => {
  if (!prev.params || !prev.params.user || prev.params.user !== state.params.user) {
    send('fetch', state.params.user)
  }
  return html`<div>...</div>`
}

(Also note that views don't have a done param -- that's only effects and subscriptions)

[yoshuawuyts]

Closing because choo@5 will introduce a new API. See #425 for the merged PR. Thanks!