dedalux dedalux - 1 year ago 67
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

example is below:

import { CALL_API, Schemas } from '../middleware/api.jsx'


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

In theory the
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
, 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 Source

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()),


applyMiddleware(createLogger(), api),
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download