操作必須是普通對象。試圖派遣行動統一到一個終極版形式

Question

我想，當一個形式與redux-form提交給執行異步功能，但無論怎樣，錯誤：

Actions must be plain objects. Use custom middleware for async actions.

是始終點火...這裏是我的配置：

createStore：

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

與形實轉換的動作：

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