Passing an effect's action to its send() creates infinite loop

[timwis]

The following creates an infinite loop of the add effect being called over and over.

app.model({
  state: { items: [] }
  reducers: {
    receive: (action, state) => ({ items: [...state.items, action] })
  }
  effects: {
    add: (action, state, send) => {
      db.put(action).then(() => send('receive', action))
    }
  }
})

const view = html`
  <form onsubmit=${(e) => {
    send('add', { title: e.target.children[0].value })
    e.preventDefault()
  }}>
    <input>
  </form>`

After some debugging, it looks like it's because send-action puts a type property into the action parameter. And if you pass that action along, choo does not overwrite that property.

Per what I was just saying in IRC, I wonder if the idea of putting the type property in the action (like redux does) parameter adds any value since it's already the method name? It seems unnecessary to have to pick apart the object properties you want, or put them into a payload property. Going a step further, I wonder if the action parameter should be renamed something like payload? (Which would make the above code more readable)

[yoshuawuyts]

Yeah, agree with you 100% here - the .type property should be omitted; something that's taken care of in v3. Going to mark this a bug, breaking change and add it to the v3 milestone since it's already fixed. Thanks! ✨

[yoshuawuyts]

Closing as 3.0 is imminent; wanna make sure all issues are taken care of. Releasing soooon™ ✨

[crapthings]

it causes infinite loop when i put onload

onload=${send('fetch')}

model.js

const faker = require('faker')

const times = require('lodash').times

app.model({

  state: {
    users: []
  },

  effects: {
    fetch: (data, state, send, done) => {
      let users = times(10, n => {
        return {
          username: faker.internet.userName()
        }
      })

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

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

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

})

[timwis]

Hi @crapthings, that's a different issue than what's described above, though I can see how it would cause an infinite loop. What you mean to write is onload=${(el) => send('fetch')}, which is a function declaration. What you wrote, onload=${send('fetch')} is executed every time the view is run and onload is "setup" rather than when onload is actually triggered.

[crapthings]

should i use onload to get inital data ?

i've found onload only happend on page reload, not switch route

[yoshuawuyts]

i've found onload only happend on page reload, not switch route

It should tho, related to #1 perhaps?