当操作是 redux-form 的一部分时，不会返回 Redux-thunk 函数

Question

我最近将 redux-forms 添加到我的 React/Redux/Redux-thunk 项目中，现在如果我向 redux-thunk 操作提交信息，信息会成功提交，但在 return 函数触发后什么也没有.

在添加 redux-forms 之前一切都按预期工作，所以我认为这是问题的根源，但即使在仔细检查 Redux、redux-form 和 redux-thunk 的文档之后，我也找不到我的连接或设置中的任何明显错误。我错过了什么？

我的减速器：

import {combineReducers} from 'redux';
import {reducer as formReducer} from 'redux-form';

import signUpReducer from './containers/SignUp/reducer';

export default function createReducer() {
  return combineReducers({
    signUpReducer,
    form: formReducer
  });
}

我的表单组件：

import React from 'react';
import {Field, reduxForm} from 'redux-form';
import {validate, onHandleInfoSubmit} from '../../containers/SignUp/actions';

import {inputField} from '../../components/SmallUIBits/FormFields';

let UserSignUpForm = props => {
  const {handleSubmit} = props;

  return (
    <form className="NewAccountForm" onSubmit={handleSubmit}>
      <div className="text-center">
        <small className="center-align">All fields are required</small>
      </div>
      <div className="AccountLine form-group">
        <Field classes="LoginInput form-control form-control-sm"
          component={inputField}
          label="Email address"
          name="email"
          placeholder="Enter email"
          required="true"
          type="text"
          value={props.email} />
      </div>
      <div className="form-row">
        <div className="col-lg-6 col-md-6 col-xs-12">
          <Field aria-describedby="passwordHelp"
            classes="LoginInput form-control form-control-sm"
            component={inputField}
            label="Password"
            name="password"
            placeholder="Password"
            required="true"
            type="password"
            value={props.password} />
        <div className="col-lg-6 col-md-6 col-xs-12">
          <Field classes="LoginInput form-control form-control-sm"
            component={inputField}
            label="Confirm password"
            name="passwordConfirm"
            placeholder="Re-enter your password"
            required="true"
            type="password"
            value={props.passwordConfirm} />
        </div>
      </div>
    </form>
  );
};

export default UserSignUpForm = reduxForm({
  form: 'UserSignUpForm',
  validate,
  onSubmit: onHandleInfoSubmit
})(UserSignUpForm);

我的表单容器

import React from 'react';

import UserSignUpForm from '../../components/UserSignUpForm';
import SignUpSubmitBtn from '../../components/SmallUIBits/SignUpSubmitBtn';

class SignUp extends React.Component {
  render() {
    return (
      <div className="Middle col-lg-6 col-md-12 col-sm-12 col-xs-12">
        <UserSignUpForm />
        <SignUpSubmitBtn />
      </div>
    );
  }
}

export default SignUp;

我的 redux-thunk 操作：

export const onHandleInfoSubmit = values => {
  // trim data
  const userInfo = Object.keys(values).reduce((previous, current) => {
    previous[current] = values[current].trim();
    return previous;
  }, {});

  const {
    email,
    password,
  } = userInfo;

  console.log(userInfo);
  console.log('creating with email and password:');
  console.log(email);
  console.log(password);
  //^^ Works fine. No problems submitting info.

  //vv Does nothing. Return never returns.
  return dispatch => {
    // Auth imported from database.js
    console.log('Creating new account);
    auth.createUserWithEmailAndPassword(email, password)
      .then(() => {
        const {currentUser} = auth;
        const userRef = database.ref(`users/${currentUser.uid}/data`);

        userRef.set({
          uid: currentUser.uid,
          email: currentUser.email,
          emailVerified: currentUser.emailVerified,
        });

        console.log('Account created successfully');
      },
      err => {
        const errorCode = err.code;
        const errorMessage = err.message;

        if (errorCode || errorMessage) {
          dispatch(newUserAccountCreateError(errorMessage));
          console.log(errorCode + errorMessage);
        }
      });
  };
};

Answer 1

终于想通了。

事实证明，我不需要 return 函数或使用 dispatch 来触发我想在成功提交表单后触发的任何操作。

所以我的 thunk 动作实际上应该是这样的。

export const onHandleInfoSubmit = values => {
  // trim data
  const userInfo = Object.keys(values).reduce((previous, current) => {
    previous[current] = values[current].trim();
    return previous;
  }, {});

  const {
    email,
    password,
  } = userInfo;

  console.log(userInfo);
  console.log('creating with email and password:');
  console.log(email);
  console.log(password);
  //^^ No change needed

  //vv remove the return function and all instances of dispatch()
    // Auth imported from database.js
    console.log('Creating new account);
    auth.createUserWithEmailAndPassword(email, password)
      .then(() => {
        const {currentUser} = auth;
        const userRef = database.ref(`users/${currentUser.uid}/data`);

        userRef.set({
          uid: currentUser.uid,
          email: currentUser.email,
          emailVerified: currentUser.emailVerified,
        });

        console.log('Account created successfully');
      },
      err => {
        const errorCode = err.code;
        const errorMessage = err.message;

        if (errorCode || errorMessage) {
          newUserAccountCreateError(errorMessage);
          console.log(errorCode + errorMessage);
        }
      });
};

我仍然不知道这是否是解决方案，因为我通常使用的是 redux-forms，或者因为我使用的是 redux-forms 的 the remote submit 功能（而且我没有改变我的代码来找出），但我希望这可以帮助其他遇到同样问题的人。

当操作是 redux-form 的一部分时，不会返回 Redux-thunk 函数

Redux-thunk functions are not being returned when action is part of a redux-form

reactjs

redux

redux-thunk

redux-form

react-redux