title: Fetching data using API middleware taking an array of 3 action types, action.type is undefined in logger and state only updates once
body: <p>I am using the code from the <a href="https://github.com/reactjs/redux/tree/master/examples/real-world" rel="nofollow noreferrer">real world example</a> from official redux guide.</p>
  
  <p>Instead of dispatching three actions to reducers depending on a fetch REQUEST, SUCCESS or FAILURE, it is done through dispatching one call with an array of the three actions, interpreted by the API. The <code>loadUser()</code> example is below:</p>
  
  <pre><code>import { CALL_API, Schemas } from '../middleware/api.jsx'
  
  export const USER_REQUEST = 'USER_REQUEST'
  export const USER_SUCCESS = 'USER_SUCCESS'
  export const USER_FAILURE = 'USER_FAILURE'
  
  
  function fetchUserAPI(id) {
    return {
      [CALL_API]: {
        types: [ USER_REQUEST, USER_SUCCESS, USER_FAILURE ],
        endpoint: `/admin/user/${id}`,
        schema: Schemas.USER
      }
    }
  }
  
  export function loadUser() {
    return (dispatch, getState) =&gt; {
      let id = getState().auth.user._id
      return dispatch(fetchUserAPI(id))
    }
  }
  </code></pre>
  
  <p>The API middleware from the example looks like the follow:</p>
  
  <pre><code>export default store =&gt; next =&gt; action =&gt; {
  
    .... validations...
  
    const callAPI = action[CALL_API]
    let { endpoint } = callAPI
    const { schema, types } = callAPI
  
    function actionWith(data) {
      const finalAction = Object.assign({}, action, data)
      delete finalAction[CALL_API]
      return finalAction
    }
  
    const [ requestType, successType, failureType ] = types
  
    next(actionWith({ type: requestType }))
  
    return callApiPositions(endpoint, schema).then(
      response =&gt; next(actionWith({
        response,
        type: successType
      })),
      error =&gt; next(actionWith({
        type: failureType,
        error: error.message || 'Something bad happened'
      }))
    )
  }
  </code></pre>
  
  <p>In theory the <code>next(actionWith(..))</code> calls are properly dispatching things, a request and either a success/failure.</p>
  
  <p>However in my console logger, I am seeing only one action that is labeled <code>undefined</code>, and the state, as least the way it appears inspecting the state shown in the logger, was not updated whatsoever</p>
  
  <p><a href="https://i.stack.imgur.com/IC5j3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IC5j3.png" alt="enter image description here"></a></p>
  
  <p>Yet in my redux devtool, I am seeing the actions dispatched properly and the state does seem to be updated:</p>
  
  <p><a href="https://i.stack.imgur.com/j5pQ6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/j5pQ6.png" alt="enter image description here"></a></p>
  
  <p>I booted up the official redux example linked in the beginning and it uses the same style of API fetching and all actions are properly dispatched in the logger, as if were 2 separate calls like the way it is in the redux devtools. </p>
  
  <p>I've been pulling my hair out on this issue because depending whether I just refreshed my page or starting from the root point, the state might or might not be updated. I think if all actions were properly dispatched then the state would be certainly updated in the way it's intended. </p>
  
  <p>Any suggestions?</p>