React Redux：从容器到组件传递道具和分派的问题

Question

I have a simple WORKING React-redux application which I tried to better organize into different folders like this:

component1.js

import React from "react";
class Presentational extends React.Component {
    constructor (props){
      super(props);
      this.state= {
        input:''
      }
      this.handleChange= this.handleChange.bind(this)
      this.submitMessage= this.submitMessage.bind(this)
    }
    handleChange (event) {
      this.setState ({
        input:event.target.value
      })
    }

    submitMessage () {
      this.props.submitNewMessage(this.state.input);
      this.setState({
        input:''
      })
    }

    render(){
      return (
        <div>
          <h2> Type a new Message </h2>
          <input value={this.state.input} onChange={this.handleChange}/>
          <br/>
          <button onClick={this.submitMessage}>Submit</button>
          <ul>
          {this.props.messages.map((message,idx) =>{
            return <li key={idx}>{message}</li>
          })}
          </ul>
        </div>
      )
    }
  }

export default Presentational;

container1.js

import { connect } from 'react-redux'
import { addMessage } from '../actions'
import Presentational from '../components'

const mapStateToProps = state => {
    return {
      messages: state
    }
  }
  const mapDispatchToProps = dispatch => {
    return {
      submitNewMessage :message => {
        dispatch(addMessage(message))
      }
    }
  }

  export default connect(mapStateToProps,mapDispatchToProps)(Presentational)

While the app works in the original app where all of the react-redux code is in 1 file, after separating the logic of the file into different folders, the app crashes and gives these errors:

TypeError: Cannot read property 'map' of undefined

Uncaught TypeError: this.props.submitNewMessage is not a function

It seems to me that the container1.js code isn't successfully 'mapping state to props' and 'mapping dispatch to props' for the Presentational component in component1.js.

Any idea what I did wrong?

Answer 1

You have to use the container1.js file instead of the component1.js file, because the component1 doesn't have the Redux props, but the container1 does.

So, you should either change your imports to use the container1 file or put the Redux prop mapping into the component1.js file