使用 Axios 执行 Redux 操作时收到 TypeError

Question

这些是 sessionActions 中的操作：

// Absolute imports
import axios from 'axios';

// Relative imports
import * as types from './actionTypes';
import auth from '../auth/authenticator';
import { ROOT_URL } from './constants';

export function loginUser(formValues) {
  return function (dispatch) {
    return axios.post(`${ROOT_URL}/login`, formValues)
      .then((response) => {
        dispatch(loginSuccess(response.data));
      })
      .error((response) => {
        dispatch(loginFailure(response.data));
      });
  }
}

export function loginSuccess(user) {
  return {
    type: types.LOG_IN_SUCCESS,
    payload: user
  };
}

export function loginFailure(error) {
  return {
    type: types.LOG_IN_FAILURE,
    payload: error
  };
}

当我触发操作时，出现以下错误：

Uncaught TypeError: _axios2.default.post(...).then(...).error is not a function

我似乎无法弄清楚哪里出了问题...以下附加信息：

"axios": "^0.15.3",

我整天都被困在这里，似乎找不到任何可以指导我找到解决方案的信息...

同时发布我的 sessionReducer：

// Absolute imports
import { browserHistory } from 'react-router';

// Relative imports
import * as types from '../actions/actionTypes';

const INITIAL_STATE = { user: null, status: null, error: null, loading: false };

export default function sessionReducer(state = INITIAL_STATE, action) {
  let error;

  switch (action.type) {
    case types.LOG_IN_SUCCESS:
      browserHistory.push('/dashboard');
      return { ...state, user: action.payload.user, status: 'authenticated', error: null, loading: false };

    case types.LOG_IN_FAILURE:
      error = action.payload.data || { message: action.payload.message };
      return { ...state, user: null, status: 'sign-in', error: error, loading: false };

    case types.LOG_OUT:
      return { ...state, user: null, status: 'logout', error: null, loading: false };

    default:
      return state;
  }
}

我还应该注意到，我能够在此过程中的多个点投入调试器并看到返回的正确负载。只是无法弄清楚为什么会发生错误并停止整个过程。

Answer 1

在您的 action creator 中，您使用常量 types.SIGNIN_USER_SUCCESS, 和 type: types.SIGNIN_USER_FAILURE,，而在您的 reducer 中，您使用常量 types.LOG_IN_SUCCESS: 和 case types.LOG_IN_FAILURE:。这些不匹配，因此将抛出错误。我假设你不是故意的。

Answer 2

这个 TypeError 意味着 "error" 不是函数 - 这正是问题所在。

您可以链接 catch 函数来捕获错误，没有 error 函数。

可以在 API 文档中查看 Handling Errors

的详细信息

使用 Axios 执行 Redux 操作时收到 TypeError

Receiving a TypeError when executing a Redux action using Axios

reactjs

redux

axios