我正在开发一个 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?
最佳答案
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);
}
关于reactjs - "Actions may not have an undefined "类型 "property. Have you misspelled a constant?",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41722574/