There was an error in create-react-app + redux, but I checked it many times but couldn't find it. Please help me. I don't know if there is a problem with the version.

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

Jan.11,2022

The react-router-redux installed for

defaults to @ 4.0.8. When you wrap app with ConnectedRouter components, you will mistakenly say that the component / string (type is invalid). Is not introduced. This is because this version cannot collaborate with react-router4

solution: npm install react-router-redux@next to upgrade

specific reference: https://github.com/ReactTrain.

clipboard.png


ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('root')
)

it would be nice for an individual to remove ConnectedRouter from the root component, but why do you have this in other cases

Menu