带有 redux-form 的 Redux-thunk - 不调度

Question

下面很长post，但并不复杂！我已经设置了我的表格：

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

为什么在使用 RemoteSubmitButton 提交表单后，从未调用 postComment 函数的第二部分？我做错了什么？

Answer 1

问题是因为您正在尝试使用与 react-redux connect 无关的操作。您必须在连接到 redux 的组件中使用它。

带有 redux-form 的 Redux-thunk - 不调度

Redux-thunk with redux-form - not dispatching

javascript

redux

redux-form