Question

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

操作文件：

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 }

Answer 1

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

Answer 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

的文档

Answer 3

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

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

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

有关更多信息：

Redux Async Actions

Redux Thunk

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

3 个答案: