無法理解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）我正在使用Thunk 2）由於這種reducer操作不返回承諾，因此它不是一個異步函數？

我真的很感謝幫助解決這個問題。我一直在試圖解決這個問題幾個小時，現在我覺得我的眼睛很快就會開始流血。

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