topic description
Warning: React.createElement: type is invalid-- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it"s defined in, or you might have mixed up default and named imports.
Check your code at index.js:26.
sources of topics and their own ideas
the same code can be put into another case that is not created by create-react-app. This is not good. I don"t know if it is a problem with the version. I can"t find it for several days. Please help me.
related codes
/ / Please paste the code text below (do not replace the code with pictures)
/ / Root component index.js
import React, {Component} from "react";
import ReactDOM from "react-dom";
import {ConnectedRouter} from "react-router-redux"
import {Provider} from "react-redux"
import {Route} from "react-router"
import configureStore, {history} from "./reduxes/configureStore"
import Home from "./components/home/Home"
const store = configureStore()
export default class App extends Component {
constructor(props) {
super(props)
}
render() {
return (
<Home />
)
}
}
ReactDOM.render(
<Provider store={store}>
<ConnectedRouter history={history}>
<Route path="/" component={App} />
</ConnectedRouter>
</Provider>,
document.getElementById("root")
)
/ / reduxer/reducer.js
import photos from "../components/home/HomeRedux"
export default {
photos
}
/ / reduxes/configureStore.js
import {createStore, applyMiddleware, combineReducers, compose} from "redux"
import {routerReducer, routerMiddleware} from "react-router-redux"
import createHistory from "history/createBrowserHistory"
import thunk from "redux-thunk"
import reducers from "./reducer"
const rootReducer = combineReducers({
...reducers,
router: routerReducer // redux
})
const history = createHistory()
export {history}
const routerML = routerMiddleware(history)
export default function configureStore() {
if (process.env.NODE_ENV === "production") {
return createStore(
rootReducer,
compose(
applyMiddleware(thunk, routerML)
)
)
} else {
return createStore(
rootReducer,
compose(
applyMiddleware(thunk, routerML),
window.devToolsExtension ? window.devToolsExtension() : f => f
)
)
}
}
/ / components/home/Home.js
import React, { Component } from "react"
import {bindActionCreators} from "redux"
import {connect} from "react-redux"
import * as actions from "./HomeRedux"
class Home extends Component {
constructor(props) {
super(props)
}
render() {
console.log(this.props);
return (
<div>Home</div>
)
}
}
export default connect(
state => {
let {photos: {imgData, curPhoto}} = state
return {
imgData,
curPhoto
}
},
dispatch => bindActionCreators({...actions}, dispatch)
)(Home)
/ / components/home/HomeRedux.js
let imgData = []
let initialState = {
imgData: [],
curPhoto: {
id: "",
src: ""
}
}
const LOAD_IMAGE = "label-case/Photogallery/LOAD_IMAGE"
export const loadImage = () => (dispatch, getState) => {
let {curPhoto} = getState().photos
dispatch({
type: LOAD_IMAGE,
imgData
})
}
export default function photos(state = initialState, action) {
let {
type,
imgData,
photo
} = action
switch (type) {
case LOAD_IMAGE:
return {...state, imgData}
break
default:
return state
}
}
what result do you expect? What is the error message actually seen?
is that you want to output all the data returned by redux in the Home.js component.
here is the demo related code: https://pan.baidu.com/s/1lvk1.
asks friends to help, thank you