reactjs - "Actions may not have an undefined "类型 "property. Have you misspelled a constant?"

Question

我正在开发一个 Facebook 应用程序，并且使用两个不同的模块:AdonisJS和 react-redux-starter-kit 。然后，当执行回调函数时，我有一个操作来存储已使用 Facebook 登录按钮登录的用户:

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

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

以及整个操作文件:

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
}

执行callback时，控制台出现错误信息:

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

Answer 1

addLinkedAccount返回的action确实没有type字段，但是在阅读redux-api-middleware的文档时，似乎是这样这正是该 Action 的构建方式。

我的猜测是您尚未将中间件安装到您的商店中。正如中间件文档中所述，您必须像这样创建商店:

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