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

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

javascript reactjs redux

Javascript 未捕获错误：操作必须是普通对象？,javascript,reactjs,redux,react-redux,redux-thunk,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 = funct

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

操作文件：

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 }

您忘记了return in action verifyPhone，因此出现此错误。

您忘记return in action verifyPhone，因此出现此错误。

您的商店未配置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')
)

从“React”导入React
从“react dom”导入react dom
从“react redux”导入{Provider}
从“react Router”导入{Router，Route，browserHistory}
从“redux”导入{createStore，applyMiddleware}
从“redux thunk”导入thunk
从“./views/App/container”导入AppContainer
导入“./index.scss”
从“./store/reducers”导入减速机
让中间件=[thunk]
const store=createStore(
减速器，
applyMiddleware（…中间件）
)
ReactDOM.render(
,
document.getElementById（'root'））
)

有关完整的api，请参阅文档