Reactjs 未能将Redux传奇与Redux整合

我第一次尝试使用Redux saga，因此我有以下sagas文件：

backendAuth.js

import {all, call, fork, put, takeEvery} from "redux-saga/effects";
import {auth} from 'backend/backend';
import {
  SIGNIN_USER,
  SIGNOUT_USER,
  SIGNUP_USER
} from "constants/ActionTypes";
import {showAuthMessage, userSignInSuccess, userSignOutSuccess, userSignUpSuccess} from "actions/Auth";

const createUserWithUsernamePasswordRequest = async (username, password) =>
  await  auth.createUserWithUsernameAndPassword(username, password)
    .then(authUser => {
      console.log('authUser: '+authUser);
      return authUser;
    })
    .catch(error => error);

const signInUserWithUsernamePasswordRequest = async (username, password) =>
  await  auth.signInWithUsernameAndPassword(username, password)
    .then(authUser => authUser)
    .catch(error => error);

const signOutRequest = async () =>
  await  auth.signOut()
    .then(authUser => authUser)
    .catch(error => error);

function* createUserWithUsernamePassword({payload}) {
  const {username, email, password} = payload;
  try {
    const signUpUser = yield call(createUserWithUsernamePasswordRequest, username, email, password);
    if (signUpUser.message) {
      yield put(showAuthMessage(signUpUser.message));
    } else {
      localStorage.setItem('user_id', signUpUser.user.uid);
      yield put(userSignUpSuccess(signUpUser.user.uid));
    }
  } catch (error) {
    yield put(showAuthMessage(error));
  }
}

function* signInUserWithUsernamePassword({payload}) {
  const {username, password} = payload;
  try {
    const signInUser = yield call(signInUserWithUsernamePasswordRequest, username, password);
    if (signInUser.message) {
      yield put(showAuthMessage(signInUser.message));
    } else {
      localStorage.setItem('user_id', signInUser.user.uid);
      yield put(userSignInSuccess(signInUser.user.uid));
    }
  } catch (error) {
    yield put(showAuthMessage(error));
  }
}

function* signOut() {
  try {
    const signOutUser = yield call(signOutRequest);
    if (signOutUser === undefined) {
      localStorage.removeItem('user_id');
      yield put(userSignOutSuccess(signOutUser));
    } else {
      yield put(showAuthMessage(signOutUser.message));
    }
  } catch (error) {
    yield put(showAuthMessage(error));
  }
}

export function* createUserAccount() {
  yield takeEvery(SIGNUP_USER, createUserWithUsernamePassword);
}

export function* signInUser() {
  yield takeEvery(SIGNIN_USER, signInUserWithUsernamePassword);
}

export function* signOutUser() {
  yield takeEvery(SIGNOUT_USER, signOut);
}

export default function* rootSaga() {
  yield all([
    fork(signInUser),
    fork(createUserAccount),
    fork(signOutUser)
  ]);
}

这是执行api异步查询的文件： backend.js

import axios from 'axios';

const backendServer = 'http://localhost:8000/';

const signInEndpoint = backendServer + 'api/token_auth/';

const signInWithUsernameAndPassword = (username, password) => {
  axios.post(backendServer+"api/token_auth/", {
    username: username,
    password: password
  })
  .then(Response => {
    console.log('Response: '+Response)
    return Response;
  })
  .catch(Error => Error);
}

export const auth = {
  signInWithUsernameAndPassword: signInWithUsernameAndPassword
}

ajax通过axios执行得很好，

backend.js

中的

console.log（）

，但是

backendAuth

中的

console.log（）

没有，控制台中出现以下错误：

index.js:1375不变冲突：对象作为React子对象无效（找到：TypeError:无法读取未定义的属性“then”）。如果要呈现子对象集合，请改用数组。

---

我相信问题在于我在

backend.js

的ajax中定义

值的返回的方式，但我对前端开发还很陌生，所以我不确定。
根本原因是一个简单的解决方案-您正在使用带有用户名和密码的
符号体的显式块
箭头函数，因此需要使用显式
返回。由于没有
return
语句，该函数返回
undefined
，这会导致整体问题

快速修复只是将函数更新为：

const signInWithUsernameAndPassword = (username, password) => {
  return axios.post(backendServer+"api/token_auth/", {
    username: username,
    password: password
  })
  .then(Response => {
    console.log('Response: '+Response)
    return Response;
  })
  .catch(Error => Error);
}

现在要了解您目前看到的最后一个错误：由于
使用用户名和密码登录
返回
未定义
，由于调用
undefined
的类型错误，您最终在
backendAuth.js
中输入
catch
块的
SignInWithUsernamePasswordRequest
。
catch
块中的错误是一个
error
实例，而不是一个普通字符串。我假设您随后在react组件树中的某个位置显示传递给
showAuthError
的
error
，但是
error
实例不是可以有效渲染的对象。您可以尝试首先对其调用
toString（）
，以显示将来的错误，而不是导致渲染错误