为什么 Axios 不给我 Redux 动作的响应？

Question

我正在尝试制作一个简单的注册表单。我有一个 redux 表单，我正在尝试将一些用户数据发送到我的 express 后端。我试图通过这个 redux 动作通过 redux 动作来做到这一点：

最终，我希望收到回复，并在必要时重定向或给出错误。后端似乎收到数据并可以验证，但是 axios 收到响应让 redux 知道更新状态。有什么想法吗？

编辑：我也尝试将 axios 请求放入 signupForm 本身，但仍然有问题（无法得到响应）。

编辑：如果您想查看所有文件，这里是回购协议：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!' });
});

还有这个注册表单组件（redux-form）：

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

此表单由容器组件提供（认为这是标准模式？如果不是请告诉我）。 注册页面容器：

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

它不起作用，因为 signUp 函数 returns 返回的匿名函数是一个承诺。使用方括号避免默认行为。

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

为什么 Axios 不给我 Redux 动作的响应？

Why won't Axios give me a response with Redux actions?

asynchronous

reactjs

redux-form

react-redux

axios