未捕获的错误：操作必须是普通对象？答案

【问题标题】：Uncaught Error: Actions must be plain objects?未捕获的错误：操作必须是普通对象？
【发布时间】：2017-07-09 19:57:53
【问题描述】：

未捕获的错误：操作必须是普通对象。使用自定义中间件进行异步操作.....

动作文件：

import $ from 'jquery'

import { phoneVerify } from '../actions/types'

const verifyPhoneAsync = function (verification) {
  return {
    type: phoneVerify,
    payload: verification
  }
}
const verifyPhone = function (phone) {
  $.ajax({
    url: 'api',
    type: 'POST',
    data: { mobile: phone },
    dataType: 'json',
    success: (data) => {
      console.log(data)
    }
  })
}
const verifyOtp = function (phone, otp) {
  return (dispatch) => {
    $.ajax({
      url: 'api',
      type: 'POST',
      data: { mobile: phone, code: otp, devicetoken: 'nil', devicetype: 'nil' },
      dataType: 'json',
      success: (data) => {
        if (data.success === true) {
          localStorage.setItem('MobileNumber', phone)
          const varification = data
          dispatch(verifyPhoneAsync(varification))
        } else {
          console.log('rfg')
          const varification = data
          dispatch(verifyPhoneAsync(varification))
        }
      }
    })
  }
}
export { verifyPhone, verifyOtp }

【问题讨论】：

你应该分享你的 redux 操作

标签： javascript reactjs redux react-redux redux-thunk

【解决方案1】：

您收到此错误是因为您直接在 action 中使用了 ajax 调用（异步调用），

这是因为 Actions 是纯 JavaScript 对象，并且必须有一个 type 属性来指示正在执行的操作的类型。

考虑将redux-thunk 中间件用于api call 目的以避免此问题。

更多信息：

Redux Async Actions

Redux Thunk

【讨论】：

【解决方案2】：

您的商店未配置 redux-thunk 中间件。因此，您的商店不知道如何调度作为函数的操作。

中间件未包含在 createStore 中，也不是基础部分 Redux 架构的介绍

由于您没有添加任何中间件，您只能调度作为对象的操作。

首先，当您只有一个商店增强器时，您不需要compose。

当我们想将多个商店增强器应用到我们的商店时，使用 Compose。

applyMiddleware 是一种存储增强器，用于将中间件添加到我们的调度链中。

请注意，applyMiddleware 和 redux 内置的唯一存储增强器

商店增强器：扩展商店本身

商店增强器只是更高阶的功能，它为我们的新商店创建者提供了扩展功能。

中间件：扩展 store 的调度方法

而中间件是高阶函数，它在我们的 redux 存储中返回一个新的调度方法，当一个新的操作被调度时，它将运行一些自定义逻辑。

如何使用 redux-thunk 等中间件建立 redux 存储

import { createStore, applyMiddleware } from 'redux'

let middleware = [ thunk ] // add additional middleware to this array

const store = createStore(
  reducer,
  preloadedState,
  applyMiddleware(...middleware)
)

所以您的代码将如下所示：

import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'
import { Router, Route, browserHistory } from 'react-router'
import { createStore, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'
import AppContainer from './views/App/container'
import './index.scss'
import reducer from './store/reducers'

let middleware = [ thunk ]

const store = createStore(
  reducer,
   applyMiddleware(...middleware)
)

ReactDOM.render(
   <Provider store={store}>
       <Router history={ browserHistory }>
         <Route path="/" component={ AppContainer }/>
       </Router>
   </Provider>,
   document.getElementById('root')
)

完整的applyMiddleware api 参见文档

【讨论】：

【解决方案3】：

您忘记在操作中返回 verifyPhone，所以您收到此错误。

【讨论】：