Redux-thunk with redux-form - не отправка

Question

Длинные сообщения ниже, но не сложно! У меня есть насторить вид:

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

Все завернутые в Новый_комментарий Компонент:

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; 
}; 

Почему после отправки формы с использованием RemoteSubmitButton вторая часть функции postComment никогда не называется? Что я сделал не так?

Answer 1

Проблема заключается в том, что вы пытаетесь использовать действие, которое не связано с react-reduxconnect. Вы должны использовать его внутри компонента, который подключен к редукту.