5

我正在开发一个 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，控制台报错：

未捕获的错误：操作可能没有未定义的“类型”属性。你有没有拼错一个常数？

4

1 回答 1

5

返回的动作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);
}
于 2017-01-18T15:09:36.707 回答