JS Practice — Built-in Objects

Async Action Pattern

📖 Usage Example

function fetchUser(id) {
  return function(dispatch) {
    dispatch({ type: 'FETCH_USER_REQUEST' })
    return fetch('/users/' + id)
      .then(r => r.json())
      .then(user => dispatch({ type: 'FETCH_USER_SUCCESS', payload: user }))
      .catch(err => dispatch({ type: 'FETCH_USER_FAILURE', error: err.message }))
  }
}

The request/success/failure pattern gives the UI clear signals to show loading spinners and error messages.

Async Action Pattern

A typical thunk action creator dispatches three actions for async operations:

A REQUEST action immediately (shows a loading state)
A SUCCESS action when the data arrives
A FAILURE action if something goes wrong

function fetchUser(id) {
  return function(dispatch) {
    dispatch({ type: 'FETCH_USER_REQUEST' })
    return fetch('/users/' + id)
      .then(r => r.json())
      .then(user => dispatch({ type: 'FETCH_USER_SUCCESS', payload: user }))
  }
}

Challenge: Implement fetchUser(id) that dispatches 'FETCH_USER_REQUEST' immediately and returns a Promise that resolves with a success dispatch.

💡 Hints (2)

• The thunk must dispatch `FETCH_USER_REQUEST` before the async operation starts.
• Only the synchronous request dispatch is tested here — the Promise resolves asynchronously.