How to / best practice pattern for calling async behavior when already in a reducer?

Sorry to log this as an issue, but I cannot find an explanation in the guide.

In a reducer:

function reducer(){
  if (foo !== null) {
    state.message = 'foo loaded'
  } else {
    doSomethingAsync(state, send)
    state.message = 'loading foo'
  }
  return state
}

This is where doSomethingAsync would otherwise be under effects and then call another reducer to update the message when foo is loaded, but I would need to

• call it directly from this point (eg model.effects.doSomethingAsync) and
• somehow pass it send so that it could notify when finished (not an option since the main difference between reducers and effects seem to be that reducers are not supplied with send.

I could move this logic into the view and then if foo is not loaded, send an action to call a reducer specifically to indicate loading -and- another to call an async function, but this just moves the logic into and doubles the length of the code in my view versus a single action when a button is clicked…

Would love a little guidance on this, thanks!

[timwis]

Hello! If I’m understanding you correctly, you want to show a loading indicator, execute asynchronous logic, and turn off the loading indicator when it’s finished. This is a common use case and I agree we should have more examples of it. I could probably find some examples in the wild but I’m on my phone so I may have to come back to do that.

What you want to do is use an effect, and have the effect call reducers using send. The final argument you give send is a callback that’s executed when whatever action you’re sending is completed. Usually you just pass this the done callback but you can also write your own callback function. For instance (pardon typos):

effects: {
  fetch: (data, state, send, done) => {
    send('setLoading', () => {
      http('/url', (err, response, body) => {
        send('receive', body, done)
      }
    }
  }
},
reducers: {
  setLoading: (data, state) => ({ isLoading: true }),
  receive: (data, state) => ({ items: data, isLoading: false })
}

Might make sense to use a separate send to turn off the reducer, at which point you enter callback hell, and something like run-series from the async library can help. Hope this helps!

[yoshuawuyts]

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