爲什麼Axios不會給我一個Redux操作響應？

Question

我想做一個簡單的註冊表單。我有一個redux表單，我試圖將一些用戶數據發送到我的快遞後端。我正在嘗試通過redux動作來執行此操作：

最終，我希望收到回覆，並在必要時重定向或發出錯誤。後端似乎收到的數據，並可以驗證，但axios接收響應，讓REDX知道更新狀態。有任何想法嗎？

編輯：我也嘗試把signiosForm本身內的axios請求，並仍然有問題（無法得到響應）。

編輯：這是，如果你想看到所有文件回購：https://github.com/capozzic1/react-blog

Redux的註冊行動：

import axios from 'axios'; 
import { SubmissionError } from 'redux-form'; 


/* eslint-disable */ 
export const signUp = userData => dispatch => axios.post('/api/users', userData) 
.then((response) => { 
    dispatch({ type: 'SIGNUP_REDIRECT_YES ', payload: true}) 
    // this.props.history.go('/'); 
    console.log(response); 
}) 
.catch((error) => { 
    console.log(error.response); 
    dispatch({ type: 'SIGNUP_REDIRECT_NO ', payload: false}) 
    throw new SubmissionError({ _error: 'Login failed!' }); 
}); 

本 註冊表單組件

而且（終極版形式）：

class SignUpForm extends React.Component { 
    constructor(props) { 
    super(props); 

    this.onSubmit = this.onSubmit.bind(this); 
    } 

    onSubmit(userData) { 
    this.props.signup(userData); 

    } 

    render() { 
    const { error, handleSubmit, pristine, reset, submitting } = this.props; 
    return (
     <form > 
     {error && (<strong>{error}</strong>)} 
     <Field name="username" type="text" component={renderField} label="Username" /> 
     <Field name="email" type="email" component={renderField} label="Email" /> 
     <Field name="password" type="text" component={renderField} label="Password" /> 
     <Field name="passwordConfirm" type="text" component={renderField} label="Enter password to confirm" /> 

     <div> 
      <button type="button" disabled={submitting} onClick={handleSubmit(this.onSubmit)}>Sign Up</button> 
      <button type="button" onClick={reset}>Clear Values</button> 
     </div> 
     </form> 
    ); 
    } 
} 


export default reduxForm({ 
    form: 'signUpForm', 


})(SignUpForm); 

此表單由一個容器comp onent（認爲這是一種標準模式？讓我知道如果不是）。 註冊頁面容器：

const mapDispatchToProps = dispatch => ({ 
    signup: (user) => { 
    dispatch(signUp(user)); 
    }, 
}); 
const SignUp = props => (
    <Layout> 
    <SignUpForm signup={props.signup} />; 
    </Layout> 
); 

export default connect(null, mapDispatchToProps)(SignUp); 

這裏是註冊減速器：

export default function reducer(state = { 
    signupRedirect: false, 
}, action) { 
    switch (action.type) { 
    case 'SIGNUP_REDIRECT_YES': { 
     return { 
     ...state, signupRedirect: action.payload, 
     }; 
    } 
    case 'SIGNUP_REDIRECT_NO' : { 
     return { 
     ...state, signupRedirect: action.payload, 
     }; 
    } 
    } 

    return state; 
} 

這裏是我的店：

import { applyMiddleware, createStore, compose } from 'redux'; 
import { createLogger } from 'redux-logger'; 
import thunk from 'redux-thunk'; 
import promise from 'redux-promise-middleware'; 
import reducer from './reducers'; 


const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; 
const store = createStore(reducer, composeEnhancers(
    applyMiddleware(promise(), thunk, createLogger()), 
)); 

export default store; 

Answer 1

它不工作因爲你的匿名函數由返回0函數返回一個承諾。使用括號來避免默認行爲。

export const signUp = userData => dispatch => { 
    axios.post('/api/users', userData) 
    .then((response) => { 
     dispatch({ type: 'SIGNUP_REDIRECT_YES ', payload: true}) 
     // this.props.history.go('/'); 
     console.log(response); 
    }) 
    .catch((error) => { 
     console.log(error.response); 
     dispatch({ type: 'SIGNUP_REDIRECT_NO ', payload: false}) 
     throw new SubmissionError({ _error: 'Login failed!' }); 
    }); 
    }