"Actions may not have an undefined "type" 属性。你是不是拼错了一个常量？"

Question

我正在开发一个 Facebook 应用程序，我正在使用两个不同的模块：AdonisJS and 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 返回的动作确实没有 type 字段，但是在阅读 redux-api-middleware 的文档时，似乎这正是应该构造动作的方式.

我猜你还没有在商店中安装中间件。如中间件文档中所述，您必须像这样创建商店：

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

"Actions may not have an undefined "type" 属性。你是不是拼错了一个常量？"

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

reactjs

redux

react-redux

redux-middleware