Question

我在使用redux-form提交表单时尝试执行异步功能，但无论如何，错误：

动作必须是普通对象。使用自定义中间件进行异步操作。

总是被解雇......这是我的配置：

createStore：

export const store = createStore(
  rootReducer,
  compose(
    applyMiddleware(thunk),
    window.devToolsExtension ? window.devToolsExtension() : f => f
  )
);

thunk的行动：

const loginUser = userData => {
  return {
    type: fb_actions.LOGIN,
    payload: userData
  }
};

export const loginFirebase = (email, password) => {
  firebase.auth()
    .signInWithEmailAndPassword(email, password)
    .then(authData => {
      return dispatch => {
        dispatch(loginUser({email: email, password: password}))
      }
    })
};

组件：

import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form';

import logo from '../static/logo-horizontal-black.svg';
import '../styles/Login.scss';

import renderLoginField from '../helpers/renderLoginField';

class Login extends Component {

  constructor() {
    super();
    this.onFormSubmit = this.onFormSubmit.bind(this);
  }

  onFormSubmit(fields) {
    const { login } = this.props;
    login(fields.email, fields.password);
  };


  render() {
    const {handleSubmit} = this.props;
    return (
      <div className='row'>
        <div className='col-xs-12 col-sm-6 col-md-4 col-md-offset-4 col-md-offset-3'>
          <section className='panel panel-default panel-login'>
            <div className='panel-heading'>
              <img src={logo} role='presentation' alt='cc-logo' className='img-responsive cc-logo' />
            </div>

            <div className='panel-body'>
              <form onSubmit={handleSubmit(this.onFormSubmit)}>
                <Field icon='mail' type='email' component={renderLoginField} name='email' />
                <Field icon='password' type='password' component={renderLoginField} name='password' />
                <button type='submit' className='btn btn-primary login-btn'>Login</button>
              </form>
            </div>
          </section>
        </div>
      </div>
    );
  }
};

Login = reduxForm({ form: 'loginForm' })(Login);

export default Login;

和容器：

import { connect } from 'react-redux';
import Login from '../components/Login';
import { loginFirebase } from '../actions/firebaseActions';

const mapStateToProps = (state, ownProps) => {
  return {
    authData: state.auth
  }
}

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    login: (email, password) => dispatch(loginFirebase(email, password))
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Login);

对此有何想法？

Answer 1

我想这个动作必须链接如下，

export const loginFirebase = (email, password) => dispatch =>
  firebase.auth()
    .signInWithEmailAndPassword(email, password)
    .then( authData => dispatch(loginUser({ email: email, password: password})));

动作必须是普通对象。试图将动作分配到redux形式

1 个答案: