Question

我正尝试第一次使用 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
}

通过 axios 很好地执行了ajax，并且到达了console.log()中的backend.js，但是没有达到console.log()中的backendAuth，并且我在控制台中收到以下错误：

index.js:1375 Invariant Violation: Objects are not valid as a React child (found: TypeError: Cannot read property 'then' of undefined). If you meant to render a collection of children, use an array instead.

我认为问题在于我在then的ajax中定义backend.js的返回值的方式，但是对于前端开发我还是很陌生，所以我不确定关于它。

Answer 1

根本原因是简单的修复-您正在为signInWithUsernameAndPassword箭头函数的主体使用显式块，因此您需要使用显式的return。由于您没有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);
}

现在，您要了解当前遇到的最终错误：由于signInWithUsernameAndPassword返回undefined，因此您最终在{{中输入了catch的{{1}}块1}}，因为调用signInWithUsernamePassword的类型错误。然后在backendAuth.js中调用。该undefined块中的错误是一个signInUserWithUsernamePasswordRequest实例，而不是纯字符串。我假设您然后在反应组件树中的某个位置显示传递到catch的{{1}}，但是Error实例不是有效的呈现对象。您可以先尝试在其上调用error以显示将来的错误，而不是引起呈现错误。

无法将Redux-saga与Redux集成

1 个答案: