"Actions may not have properties of type undefined." Did you have a bug with a constant? "

Question

I am developing a Facebook application and I use two different modules: AdonisJS and react-redux-starter-kit . I have an action to save a user who is logged in using the Facebook login button when the callback function is done:

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 a callback is executed, an error message in the console:

Fault: actions may not have properties of type undefined. Did you have a bug with a constant?

Answer 1

The action returned by addLinkedAccount does not really have a type field, but when reading the redux-api-middleware documentation, it seems that this is how the action should be created.

I assume that you did not install middleware in your store. As described in the middleware documentation, you should create your store as follows:

 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); }