Uncaught Error: Actions must be plain objects?

Question

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 }

You should share your redux actions – keul Feb 20 '17 at 13:56 — keul, Feb 20 '17 at 13:56

score 2 · Accepted Answer · answered Feb 20 '17 at 15:45

2

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

answered Feb 20 '17 at 15:45

Andrii Starusiev

7,564
2
28
37

score 2 · Answer 2 · edited May 23 '17 at 11:53

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

score 0 · Answer 3 · answered Aug 13 '19 at 12:00

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

Uncaught Error: Actions must be plain objects?

3 Answers3

Linked