不能調用操作後連接反應，終極版和mapDispatchToProps

Question

組件連接到Redux的商店後，我無法在容器調用操作

我的容器：

import React, { Component } from 'react'; 
import * as actions from '../actions'; 
import { connect } from 'react-redux'; 

class CommentBox extends Component { 
    constructor(props) { 
     super(props); 

     this.state = { comment: '' }; 
     this.handleSubmit = this.handleSubmit.bind(this); 
    } 

    handleChange(event) { 
     this.setState({ comment: event.target.value }); 
    } 

    handleSubmit(event) { 
     event.preventDefault(); 

     this.props.actions.saveComment(this.state.comment); 
     this.setState({ comment: '' }); 
    } 

    render() { 
     return (
      <form 
       onSubmit={this.handleSubmit} 
       className="comment-box"> 
       <textarea 
        value={this.state.comment} 
        onChange={this.handleChange.bind(this)}/> 
       <button action="submit">Submit Comment</button> 
      </form> 
     ); 
    } 
} 

const Container = connect(null, actions)(CommentBox); 

export default Container; 

我的行動創造者

import React, { Component } from 'react'; 
import CommentBox from './comment_box'; 
import CommentList from './comment_list'; 

export default class App extends Component { 
    render() { 
    return (
     <div> 
      <CommentBox /> 
      <CommentList /> 
     </div> 
    ); 
    } 
} 

我確定我有正確的導入路徑。 當我試圖執行handleSubmit（），控制檯說

無法讀取的不確定

所以財產「saveComment」我曾考察了handleSubmit道具，它像一個對象：

default: function() ... 

有任何操作，我需要映射。我如何解決它？謝謝

Editted： 這裏是我的行動

import SAVE_COMMENT from './types'; 

export default function saveComment(comment) { 
    return { 
     type: SAVE_COMMENT, 
     payload: comment 
    }; 
}; 

我以前也發現我出口行動的創建者爲默認值。這樣，當我與import * as action進口的吧，我有一個看起來像

{ default: function saveComment() } 

對象這讓mapDispatchToProps映射默認屬性集裝箱的道具。要解決它，我只需在導出saveComment時刪除default，並且它可以很好地工作。謝謝大家

Answer 1

既然你導入操作，因爲這裏import * as actions from '../actions';做，你應該能夠做actions.saveComment(this.state.comment);在handleSubmit()

Answer 2

，是不是在你的組件中使用動作正確的方式來訪問你的行動。您必須確保這些操作被包裝在派遣方法中。在你的情況下，我會創建另一個函數mapDispatchToProps並使用bindActionCreators。看我的代碼如下：

import React, { Component } from 'react'; 
import * as actions from '../actions'; 
import { bindActionCreators } from 'redux'; 
import { connect } from 'react-redux'; 

class CommentBox extends Component { 
    constructor(props) { 
     super(props); 

     this.state = { comment: '' }; 
     this.handleSubmit = this.handleSubmit.bind(this); 
    } 

    handleChange(event) { 
     this.setState({ comment: event.target.value }); 
    } 

    handleSubmit(event) { 
     event.preventDefault(); 

     this.props.actions.saveComment(this.state.comment); 
     this.setState({ comment: '' }); 
    } 

    render() { 
     return (
      <form 
       onSubmit={this.handleSubmit} 
       className="comment-box"> 
       <textarea 
        value={this.state.comment} 
        onChange={this.handleChange.bind(this)}/> 
       <button action="submit">Submit Comment</button> 
      </form> 
     ); 
    } 
} 

// use bindActionCreators here 
const mapDispatchToProps = dispatch => ({ 
    actions: bindActionCreators(actions, dispatch), 
}) 

const Container = connect(null, mapDispatchToProps)(CommentBox); 

export default Container;