"Actions may not have an undefined "type" property. Have you misspelled a constant?"

Question

I'm developing a Facebook app, and I'm using two different modules: AdonisJS and react-redux-starter-kit. I have then an action to store a user that has logged in using Facebook log in button when the callback function is executed:

callback = (r) => {
  const { addLinkedAccount } = this.props

  addLinkedAccount({
    userId: r.userId,
    name: r.name,
    accessToken: r.accessToken,
    email: r.email
  })
}

And the whole action file:

import { CALL_API } from 'redux-api-middleware'

// ------------------------------------
// Constants
// ------------------------------------
export const ADD_LINKED_ACCOUNT = 'linkedAccount:add_linked_account'
export const ADD_LINKED_ACCOUNT_SUCCESS = 'linkedAccount:add_linked_account_success'
export const ADD_LINKED_ACCOUNT_FAIL = 'linkedAccount:add_linked_account_fail'

// ------------------------------------
// Actions
// ------------------------------------
export function addLinkedAccount ({ userId, name, accessToken, email }) {
  return {
    [CALL_API]: {
      endpoint: '/api/linked-accounts',
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ userId, name, accessToken, email }),
      types: [ADD_LINKED_ACCOUNT, ADD_LINKED_ACCOUNT_SUCCESS, ADD_LINKED_ACCOUNT_FAIL]
    }
  }
}

export const actions = {
  addLinkedAccount
}

// ------------------------------------
// Action Handlers
// ------------------------------------
const ACTION_HANDLERS = {
  [ADD_LINKED_ACCOUNT]: state => ({
    ...state,
    addingLinkedAccount: true
  }),
  [ADD_LINKED_ACCOUNT_SUCCESS]: (state, action) => ({
    ...state,
    addingLinkedAccount: false,
    addLinkedAccountSuccess: true,
    linkedAccount: action.payload
  }),
  [ADD_LINKED_ACCOUNT_FAIL]: (state, action) => ({
    ...state,
    addingLinkedAccount: false,
    addLinkedAccountError: action.payload.response.error
  })
}

// ------------------------------------
// Reducer
// ------------------------------------
const initialState = {
  addingLinkedAccount: false,
  addLinkedAccountSuccess: false,
  linkedAccount: null,
  addLinkedAccountError: {}
}

export default function linkedAccountReducer (state = initialState, action) {
  const handler = ACTION_HANDLERS[action.type]

  return handler ? handler(state, action) : state
}

When callback is executed, the error message in console:

Uncaught Error: Actions may not have an undefined "type" property. Have you misspelled a constant?

Answer 1

The action returned by addLinkedAccount indeed has no type field, yet when reading the documentation of redux-api-middleware, it appears that this is exactly how the action is supposed to be constructed.

My guess is that you have not installed the middleware into your store. As described in the middleware's documentation, you must create your store like so:

import { createStore, applyMiddleware, combineReducers } from 'redux';
import { apiMiddleware } from 'redux-api-middleware';
import reducers from './reducers';

const reducer = combineReducers(reducers);
// the next line is the important part
const createStoreWithMiddleware = applyMiddleware(apiMiddleware)(createStore);

export default function configureStore(initialState) {
  return createStoreWithMiddleware(reducer, initialState);
}