Question

我最近在我的React / Redux / Redux-thunk项目中添加了redux-forms，现在如果我向redux-thunk动作提交信息，则信息提交成功，但在返回函数触发后没有任何内容。

在添加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

终于想通了。

事实证明，在成功提交表单后，我不需要返回一个函数或使用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功能（而且我没有将我的代码更改为找出来，但我希望这可以帮助其他人遇到同样的问题。

当action是redux-form

1 个答案: