dedalux dedalux - 3 months ago 8
Node.js Question

Fetching data using API middleware taking an array of 3 action types, action.type is undefined in logger and state only updates once

I am using the code from the real world example from official redux guide.

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

loadUser()
example is below:

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) => {
let id = getState().auth.user._id
return dispatch(fetchUserAPI(id))
}
}


The API middleware from the example looks like the follow:

export default store => next => action => {

.... 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 => next(actionWith({
response,
type: successType
})),
error => next(actionWith({
type: failureType,
error: error.message || 'Something bad happened'
}))
)
}


In theory the
next(actionWith(..))
calls are properly dispatching things, a request and either a success/failure.

However in my console logger, I am seeing only one action that is labeled
undefined
, and the state, as least the way it appears inspecting the state shown in the logger, was not updated whatsoever

enter image description here

Yet in my redux devtool, I am seeing the actions dispatched properly and the state does seem to be updated:

enter image description here

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.

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.

Any suggestions?

Answer

The order of middlewares actually matters. You need logger to be the last one.

Right now logger works before API. Make sure you have

applyMiddleware(api, createLogger()),

Not

applyMiddleware(createLogger(), api),
Comments