redux-thunk with redux-form - 不發送

下面的長帖，但並不複雜！我有我的設置形式：redux-thunk with redux-form - 不發送

NewCommentForm組件

class NewCommentForm extends Component { 
    render() { 
     const { handleSubmit } = this.props; 
     return (
      <form onSubmit={handleSubmit}> 
       <Field component="input" type="text" name="title"/> 
       <Field component="textarea" type="text" name="content"/> 
      </form> 
     ) 
    } 
} 
const mapStateToProps = (state) => ({}) 
// Actions are imported as 'import * as action from '../actions/comments' 
NewCommentForm = connect(mapStateToProps, actions)(NewCommentForm) 

NewCommentForm = reduxForm({ 
    form: 'newComment', 
    onSubmit: actions.postComment // This is the problem! 
})(NewCommentForm);

RemoteSubmitButton組件

class RemoteSubmitButton extends Component { 
    render() { 
     const { dispatch } = this.props; 
     return (
      <button 
      type="button" 
      onClick={() => dispatch(submit('newComment'))}>Submit</button> 
    ) 
    } 
} 
RemoteSubmitButton = connect()(RemoteSubmitButton);

一切都包裹在NewComment組件：

class NewComment extends Component { 
    render() { 
     return (
       <div className="new-comment"> 
        <NewCommentForm /> 
        <RemoteSubmitButton /> 
       </div> 
     ) 
    } 
}

的問題是與postComment功能：

export const postComment = (comment) => { 
    console.log("Post comment - first;") // THIS ONE GETS CALLED 
    return (dispatch) => { 
     console.log("Post comment - second"); // THIS ONE IS NEVER CALLED 
     return api.postComment(comment).then(response => { 
      dispatch({ 
       type: 'POST_COMMENT_SUCCESS', 
       response 
      }); 
     }); 
    } 
}

從另一個文件中獲取api.postComment：

export const postComment = (comment) => { 
    return axios.post(post_comment_url, { 
     comment 
    }).then(response => { 
     return response; 
    }); 
}

我redux-thunk安裝在我的商店：

import thunk from 'redux-thunk'; 
const configureStore = (railsProps) => { 
    const middlewares = [thunk]; 
    const store = createStore(
    reducers, 
    railsProps, 
    applyMiddleware(...middlewares) 
); 
    return store; 
};

爲什麼在使用提交表單後0 postComment函數的第二部分是不會被調用的？我做錯了什麼？

來源

2017-02-02 Ancinek

問題是因爲您正在嘗試使用未與react-reduxconnect連接的操作。您必須在連接到redux的組件內使用它。

來源

2017-02-02 15:58:03

我希望是這樣。但是添加這個捕獲物根本不會改變。沒有日誌顯示，仍然只有'Post comment - first'消息 – Ancinek

感謝您的編輯。我將'this.props.handleSubmit（this.props.postComment）'傳遞給了'onSubmit'形式，但是出現了一個錯誤：'您必須通過handleSubmit（）傳遞onSubmit函數或傳遞onSubmit作爲prop'。 – Ancinek

我發現了你的問題，但是現在你必須學習如何使用閱讀文檔的反應表單來做到這一點。我認爲[此鏈接]（http://redux-form.com/6.0.0-alpha.4/examples/initializeFromState/）可能會對您有所幫助。 –

redux-thunk with redux-form - 不發送

回答

相關問題