получение необработанного отклонения - PullRequest
0 голосов
/ 09 января 2020

Я получаю эту ошибку в React 16 с использованием Redux, когда пытаюсь настроить компонент для использования хранилища Redux.

connected

получение необработанным Отклонение .._ 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), который дает мне ту же ошибку)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...