React Reduxのソースを理解できません 'アクションはプレーンなオブジェクトでなければなりません。'

Question

このエラーメッセージを参照するスレッドが多数あることはわかっていますが、なぜこのエラーが発生するのかを説明するものは見つかりません。

私はReactとReduxに比較的新しいですが、私はPromisesとasynch関数の概念を理解していると思いますが、ここでは何かを逃してしまいます。だから私はindex.jsモーダルコンテナ、モーダルコンポーネントとモーダルレデューサーを持っています。

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 

モーダル減速： -

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 
    } 
} 

問題はクリックから生じる： -

<span className='darkBtn' onClick={props.openModal}> 

は、それが正常に減速アクション機能を呼び出すだけでなく、私に「不明なエラーを与える：アクションは、プレーンなオブジェクトでなければなりません。非同期アクションにはカスタムミドルウェアを使用してください。エラー。

1）私はサンクを使用しています 2）このリデューサアクションは約束を返さないため、アシンク機能ではありませんか？

私は本当にこれを解決するために助けていただきありがとうございます。私は数時間の間これを解決しようとしていました。私の目がすぐに出血し始めるような気がします。

Answer 1

これはJavaScriptのクールです。返す値は、returnキーワードで同じ行にする必要があります。

の代わり：

// (this will return `undefined`) 
export const openModal =() => { 
    return 
    { 
    type: OPEN_MODAL 
    } 
} 

あなたは書く必要があります。

//(this will return the action object) 
export const openModal =() => { 
    return { 
    type: OPEN_MODAL 
    }; 
}