Impossible de comprendre la source de React Redux 'Les actions doivent être des objets simples.'

Question

Je suis conscient qu'il y a beaucoup de threads se référant à ce message d'erreur mais je ne peux pas trouver un qui explique pourquoi je reçois cette erreur.

Bien que je sois relativement nouveau à React et Redux, je pense que je comprends le concept des promesses et des fonctions asynchrones, mais il me manque quelque chose ici. J'ai donc mon conteneur modal index.js, le composant Modal et un réducteur modal.

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 

réducteur 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 
    } 
} 

Le problème se pose de cliquer sur: -

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

Il invoque avec succès la fonction d'action du réducteur, mais me donne aussi « Uncaught Erreur: Les actions doivent être des objets simples. Utilisez un middleware personnalisé pour les actions asynchrones. ' Erreur. Je ne comprends pas cela parce que

1) J'utilise Thunk 2) Comme cette action réductrice ne renvoie pas de promesse, elle n'est donc pas une fonction asynchrone?

J'apprécierais vraiment l'aide en résolvant ceci. J'ai essayé de résoudre ça pendant quelques heures maintenant et j'ai l'impression que mes yeux vont bientôt commencer à saigner.

Answer 1

C'est un peu bizarre en JavaScript. La valeur que vous allez retourner doit être sur la même ligne que le mot-clé return.

au lieu de:

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

Vous devriez écrire:

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