React-Redux容器在Connect（ModalRoot）中抛出“ mapStateToProps（）”时必须返回一个普通对象。 而是收到未定义的信息。”

Question

I am building a Redux based Model/Dialog trigger based on Dan Abramov's solution to this question: Dan Abramov's solution

The error I am getting is "mapStateToProps() in Connect(ModalRoot) must return a plain object. Instead received undefined."

---

Here is the code for the modal container and the code that calls it:

 // 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)

---

  // 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) 

---

Its probably something simple i'm forgetting but its driving me crazy, any comments or suggestions welcome.

Answer 1

According to redux implementation and example you should write like this

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

See here

Answer 2

Perhaps mapStateToProps needs to pick a specific object from your reducer

Could you try something like this?

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

Its either this or perhaps you arent properly passing combineReducers to your store

Answer 3

The root cause of the problem is that state.modal is undefined. You can get more info by adding a simple log statement like:

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

This may help you see what's in state and help in figuring out why state.modal is undefined.

To make this error go away, you can use either of these 2 solutions:

Ensuring the object is not undefined:

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

Using ES6 destructuring:

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

If you use the ES6 destructuring (which is essentially same as @MichaelRasoahaingo's solution), your prop destructuring will also change to:

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

Or you can use this alternative syntax and keep your destructuring as is:

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