首页 文章

当action是redux-form的一部分时,不会返回Redux-thunk函数

提问于
浏览
0

我最近在我的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);
        }
      });
  };
};

1 回答

  • 0

    终于搞清楚了 .

    事实证明,在成功提交表单后,我不需要返回一个函数或使用 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功能(我并没有改变我的代码来查找),但我希望这可以帮助其他人遇到同样的问题 .

相关问题