React-Redux Container-Würfe "mapStateToProps() in Connect (ModalRoot) muss ein einfaches Objekt zurückgeben. Stattdessen empfangen undefined."

Question

Ich baue eine Redux basiertes Modell/Dialog-Trigger basierend auf Dan Abramov Lösung auf diese Frage: Dan Abramov's solution

Der Fehler, den ich bekommen habe ist „mapStateToProps() in Connect (ModalRoot) muss ein einfaches Objekt zurückgeben Stattdessen erhielt undefiniert. . "

---

Hier ist der Code für den Modal-Container und dem Code, den es nennt:

// Code that calls the Modal Container 

import React from 'react'; 
import { Provider } from 'react-redux'; 
import { Connector as HorizonConnector } from 'horizon-react'; 
import getMuiTheme from 'material-ui/styles/getMuiTheme'; 
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; 

import routes from '../routes'; 
import store from '../store'; 
import horizon from '../db'; 
import ModalRoot from './Modal'; 

export default() => (
    <MuiThemeProvider muiTheme={getMuiTheme()}> 
    <HorizonConnector horizon={horizon} store={store}> 
     <div className="app"> 
     {routes} 
     <ModalRoot /> 
     </div> 
    </HorizonConnector> 
    </MuiThemeProvider> 
); 

---

// The Modal Container 
import LoginModal from '../components/Modals/LoginModal' 
import {connect} from 'react-redux' 

const MODAL_COMPONENTS = { 
    'LOGIN_MODAL': LoginModal 
    /* other modals */ 
} 

const ModalRoot = ({ modalType, modalProps }) => { 
    if (!modalType) { 
    return <span /> // after React v15 you can return null here 
    } 

    const SpecificModal = MODAL_COMPONENTS[modalType] 
    return <SpecificModal {...modalProps} /> 
} 

export default connect(
    state => state.modal 
)(ModalRoot) 

---

Es ist wahrscheinlich etwas einfach, ich bin zu vergessen, aber seine mich verrückt, Kommentare oder Vorschläge sind willkommen.

Answer 1

Nach redux Implementierung und Beispiel sollten Sie dieses here Siehe

export default connect(
    state => ({ 
    modal: state.modal 
    }) 
)(ModalRoot) 

schreiben

Answer 2

Vielleicht mapStateToProps ein bestimmtes Objekt von Ihrem Minderer zu holen braucht

Könnten Sie so etwas wie dies versuchen?

function mapStateToProps(state){ 
    const {modalType,modalProps} = state.modal; 
    return {modalType,modalProps}; 
} 

Sein entweder dieses oder vielleicht Arent Sie combineReducers zu Ihrem Geschäft

Answer 3

Die Ursache des Problems richtig vorbei ist, dass state.modal nicht definiert ist. Sie können weitere Informationen erhalten, indem eine einfache Log-Anweisung Zugabe wie:

export default connect(state => { console.log('state', state); return state.modal })(ModalRoot) 

Dies kann Ihnen helfen, zu sehen, was in state ist und helfen, herauszufinden, warum state.modal nicht definiert ist.

Um diesen Fehler weggehen, Sie eine dieser zwei Lösungen verwenden können:

das Objekt Gewährleistung nicht undefined:

export default connect(state => state.modal || {})(ModalRoot) 

Mit ES6 Destrukturierung:

export default connect(({ modal }) => ({ modal }))(ModalRoot) 

Wenn Sie die ES6-Destrukturierung verwenden (die im Wesentlichen identisch ist mit @MichaelRasoaha ingo-Lösung), Ihre prop Destrukturierung wird auch ändern:

const ModalRoot = ({ modal: { modalType, modalProps } }) => { 

Oder Sie können diese alternative Syntax verwenden und Ihre Destrukturierung halten wie:

export default connect(({ modal }) => ({ ...modal }))(ModalRoot)