Я получаю эту ошибку в React 16 с использованием Redux, когда пытаюсь настроить компонент для использования хранилища Redux.
получение необработанным Отклонение .._ WEBPACK_IMPORTED_MODULE.default не является конструктором (React Redux, метод соединения с редуксом)
Код, который обрабатывает это
export default connect(mapStateToProps, mapDispatchToProps)(Marble)
Весь мой объект Marble определен как
import Movable from "../movable";
import { connect } from 'react-redux'
import PropTypes from 'prop-types'
import { moveMarbleTo } from '../store/modelActionCreators.js'
import store from '../store/'
class Marble extends Movable {
constructor(props) {
super(props)
var {key, name, blurb} = props
this.key = key
this.name = name
this.blurb = blurb
return this
}
moveMarbleTo(new_cords) {
}
}
const mapStateToProps = (storeData) => ({
ideas: storeData.ideas
})
const mapDispatchToProps = {
moveMarbleToCallback: moveMarbleTo
}
Marble.propTypes = {
moveMarbleTo: PropTypes.func.isRequired
}
// THIS WORKS
// export default Marble
// THIS DOES NOT
export default connect(mapStateToProps, mapDispatchToProps)(Marble)
для справки ...
мой store/index.js
файл
import {applyMiddleware, createStore, compose} from "redux";
import thunk from 'redux-thunk'
import rootReducer from '../reducers'
const initialState = {}
const middleware = [thunk]
const store = createStore(
rootReducer,
initialState ,
compose(
applyMiddleware(...middleware),
window.__REDUX_DEVTOOLS_EXTENSION__ &&
window.__REDUX_DEVTOOLS_EXTENSION__()
)
)
export default store
и мой store/modelActionCreators.js
файл
import { MARBLES, MARBLE, LOGO } from './dataTypes'
import { ADD_MARBLE, MOVE_TO , FETCH_IDEAS} from "./modelActionTypes";
let idCounter = 100
export const moveMarbleTo = (marble) => {
return createMoveMarbleToEvent(MARBLE, marble )
}
const createMoveMarbleToEvent = (dataType, payload) => {
if (!payload.id) {
return {
type: MOVE_TO,
dataType,
payload: {...payload, id: idCounter++}
}
} else {
return {
type: ADD_MARBLE,
dataType,
payload
}
}
}
мой reducers/index.js
файл это
import { combineReducers } from 'redux'
import {marbleReducer} from './marbleReducer'
export default combineReducers({
posts: marbleReducer
})
и, наконец, мой reducers/marbleReducer.js
это
import {ADD_MARBLE, MOVE_TO, FETCH_IDEAS} from '../store/modelActionTypes'
const initialState = {
items: [],
item: {}
}
export const marbleReducer = function(state = initialState, action) {
// the action must have a type
switch(action.type) {
case ADD_MARBLE:
console.log("REDUCER dispatching ADD_MARBLE; paypload=", action.payload)
return {
...state,
items: action.payload
}
case MOVE_TO:
console.log("REDUCER dispatching MOVE_TO; paypload=", action.payload)
return {
...state,
item: action.payload
}
default:
return state;
}
}
В основном, где я застрял, каждый раз, когда я переключаю export default Marble
на export default connect(mapStateToProps, mapDispatchToProps)(Marble)
, я получаю вышеуказанную ошибку (я также пытался export default connect(null, { moveMarbleTo })(Marble)
, который дает мне ту же ошибку)