Uncaught Error: Actions must be plain objects?

问题

Uncaught Error: Actions must be plain objects. Use custom middleware for async actions.....

Action file:

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 }

回答1:

You forgot return in action verifyPhone, so you got this error.

回答2:

Your store is not configured with the redux-thunk middleware. Therefore your store doesn't know how to dispatch actions which are functions.

Middleware is not baked into createStore and is not a fundamental part of the Redux architecture

Since you have not added any middleware you can only dispatch actions which are objects.

Firstly, you do not need compose when you only have one store enhancer.

Compose is used when we want to apply multiple store enhancers to our store.

applyMiddleware is a store enhancer for adding middleware to our dispatch chain.

Note that applyMiddleware and the only store enhancer built into redux

Store enhancers: extends store itself

Store enhancers are just higher order functions that give us new store creators with extended functionality.

Middleware: extends dispatch method of store

Whereas middleware are higher order functions that return a new dispatch method on our redux store that will run some custom logic when a new action is dispatched.

How to set up a redux store with middleware such as redux-thunk

import { createStore, applyMiddleware } from 'redux'

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

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

So your code will look like this:

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')
)

See the docs for the complete applyMiddleware api

回答3:

You have got this error because you are using an ajax call (asynchronous call) directly in your action,

that is because Actions are meant to be plain JavaScript objects and must have a type property that indicates the type of action being performed.

Consider using redux-thunk middleware for api call purposes to avoid this issue.

For more information:

Redux Async Actions

Redux Thunk

来源：https://stackoverflow.com/questions/42346248/uncaught-error-actions-must-be-plain-objects

标签

javascript

reactjs

redux

react-redux

redux-thunk