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

Solution 1:

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

Solution 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 arrayconst store = createStore(
  reducer,
  preloadedState,
  applyMiddleware(...middleware)
)

So your code will look like this:

importReactfrom'react'importReactDOM 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'importAppContainerfrom'./views/App/container'import'./index.scss'import reducer from'./store/reducers'let middleware = [ thunk ]

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

ReactDOM.render(
   <Providerstore={store}><Routerhistory={browserHistory }><Routepath="/"component={AppContainer }/></Router></Provider>,
   document.getElementById('root')
)

See the docs for the complete applyMiddleware api

Solution 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