Cannot understand source of React Redux 'Actions must be plain objects.' - reactjs

Question

I am aware there are a lot of threads referring to this error message but I cannot find one that explains why I am getting this error.
While I am relatively new to React and Redux, I think I understand the concept of Promises and asynch functions but I have to be missing something here. So I have my index.js Modal container, Modal component and a modal reducer.
index.js: -
import React from 'react'
import ReactDOM from 'react-dom'
import routes from './config/routes'
import {createStore, applyMiddleware, compose, combineReducers} from 'redux'
import {Provider} from 'react-redux'
import * as reducers from '_redux/modules/'
import thunk from 'redux-thunk'
import { checkIfAuthed } from '_helpers/auth'
const store = createStore(
combineReducers(reducers),
compose(applyMiddleware(thunk),
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
))
// CSS
import "_css/main.scss";
ReactDOM.render(
<Provider store={store}>{routes}</Provider>,
document.getElementById('app'))
ModalContainer.js: -
import { Modal } from '_components'
import { bindActionCreators } from 'redux'
import * as modalActionCreators from '_redux/modules/Modal/Modal'
import { connect } from 'react-redux'
const mapStateToProps = ({users, modal}) => {
const duckTextLength = modal.duckText.length
return {
user: users[users.authedId] ? users[users.authedId].info : {},
duckText: modal.duckText,
isOpen: modal.isOpen,
isSubmitDisabled: duckTextLength <= 0 || duckTextLength > 140,
}
}
const mapDispatchToProps = (dispatch) => {
return bindActionCreators(modalActionCreators, dispatch)
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(Modal)
Modal.js
import React from 'react'
import PropTypes from 'prop-types';
import { default as ReactModal } from 'react-modal'
const modalStyle = {
content: {
width: 350,
margin: '0px auto',
height: 220,
borderRadius: 5,
background: '#EBEBEB',
padding: 0,
}
}
const Modal = (props) => {
const submitDuck = () => {
console.log('Duck', props.duckText)
console.log('user', props.user)
}
return(
<span className='darkBtn' onClick={props.openModal}>
{'Duck'}
</span>
)
}
Modal.PropTypes = {
duckText: PropTypes.string.isRequired,
isOpen: PropTypes.bool.isRequired,
user: PropTypes.object.isRequired,
isSubmitDisabled: PropTypes.bool.isRequired,
openModal: PropTypes.func.isRequired,
closeModal: PropTypes.func.isRequired,
updateDuckText: PropTypes.func.isRequired,
}
export default Modal
modal reducer: -
const OPEN_MODAL = 'OPEN_MODAL'
const CLOSE_MODAL = 'CLOSE_MODAL'
const UPDATE_DUCK_TEXT = 'UPDATE_DUCK_TEXT'
export const openModal = () => {
return
{
type: OPEN_MODAL
}
}
export const closeModal = () => {
return
{
type: CLOSE_MODAL
}
}
export const newDuckText = () => {
return
{
type: UPDATE_DUCK_TEXT,
newDuckText
}
}
const initialState = {
duckText: '',
isOpen: false,
}
export const modal = (state = initialState, action) => {
switch (action.type) {
case OPEN_MODAL :
return {
...state,
isOpen: true,
}
case CLOSE_MODAL :
return {
duckText: '',
isOpen: false,
}
case UPDATE_DUCK_TEXT :
return {
...state,
duckText: action.newDuckText,
}
default :
return state
}
}
The problem arises from clicking on: -
<span className='darkBtn' onClick={props.openModal}>
It successfully invokes the reducer action function but also gives me 'Uncaught Error: Actions must be plain objects. Use custom middleware for async actions.' error. I don't understand this because
1) I am using Thunk
2) As this reducer action does not return a promise it is therefore not an asynch function?
I would really appreciate help in resolving this. I've been trying to solve this for a couple hours now and I feel like my eyes are going to start bleeding soon.

Answer 1

It's a quirk in JavaScript. The value that you are going to return should be on the same line with the return keyword.
instead of:
// (this will return `undefined`)
export const openModal = () => {
return
{
type: OPEN_MODAL
}
}
You should write:
//(this will return the action object)
export const openModal = () => {
return {
type: OPEN_MODAL
};
}