未捕获错误:操作必须是普通对象?

时间:2017-02-20 13:46:33

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

  

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

操作文件:

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 }

3 个答案:

答案 0 :(得分:2)

你忘了返回行动验证电话,所以你得到了这个错误。

答案 1 :(得分:2)

您的商店未配置redux-thunk中间件。因此,您的商店不知道如何发送作为功能的动作。

  

中间件并未融入createStore,并不是一个基本部分   Redux架构

由于您尚未添加任何中间件,因此您只能分派作为对象的操作。

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

当我们想要将多个商店增强器应用于商店时,会使用撰写。

applyMiddleware是一个商店增强器,用于向我们的调度链添加中间件。

请注意,applyMiddleware和内置于redux的唯一商店增强器

商店增强剂:扩展商店本身

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

中间件:扩展商店的调度方法

中间件是高阶函数,它们在我们的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

的文档

答案 2 :(得分:0)

出现此错误是因为您直接在action中使用了ajax调用(异步调用),

这是因为Actions是纯JavaScript对象,并且必须具有指示要执行的操作类型的type属性。

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

有关更多信息:

Redux Async Actions

Redux Thunk