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

그것은 성공적으로 감속기 액션 함수를 호출뿐만 아니라 나 'catch되지 않은 오류를 제공합니다 : 작업은 일반 개체를해야합니다. 비동기 작업에는 맞춤 미들웨어를 사용하십시오. ' 오류. 나는 이것을 이해하지 못한다. 왜냐하면

1) 나는 뱀을 사용하고있다. 2)이 감속기 동작은 약속을 반환하지 않으므로 비동기 함수가 아니기 때문에?

정말 고맙겠습니다. 나는 지금 2 시간 동안 이것을 해결하려고 노력하고 있었고, 내 눈이 곧 피가 나기 시작할 것 같은 느낌이 든다.

Answer 1

자바 스크립트의 특징입니다. 반환 할 값은 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 
    }; 
}