Попытка вызвать вызов API и получить «Действия должны быть простыми объектами. Использовать пользовательское промежуточное ПО для асинхронных действий».

Question

Я пытаюсь создать страницы входа и выхода из системы с помощью моего API и Redux.

В настоящее время у меня есть типы: LOGIN, LOGIN_FAILED и LOGOUT.

InРедуктор Я создал чехол для каждого типа

Вот как это выглядит:

import React, { Component } from "react";
import {
  LOGIN,
  LOGIN_FAILED,
  LOGOUT
} from '../types'

 const defaultState = {
   isLoggedIn: false,
   UserName: '',
   UserEmail: '',
   UserPassword: ''
 };

  export default function reducer(state = defaultState, action) {
    switch (action.type) {
      case LOGIN:
        return Object.assign({}, state, {
            isLoggedIn: true,
            UserName: action.UserName,
            UserEmail: action.UserEmail,
            UserPassword: action.UserPassword
        });
    case LOGOUT:
        return Object.assign({}, state, {
            isLoggedIn: false,
            UserName: '',
            UserEmail: '',
            UserPassword: ''
        });
    case LOGIN_FAILED:
      return {
        UserName: '',
        UserEmail: '',
        UserPassword: '',
        isLoggedIn: false
      }
    default:
        return state;
}

А вот такие действия:

 import {
   LOGIN,
   LOGIN_FAILED,
   LOGOUT
 } from '../types'

 export const login = (UserName, UserEmail, UserPassword) => async (dispatch) => {
   function onSuccess(success) {
     dispatch({ type: LOGIN, payload: success })
     return success
   }
  function onError(error) {
    dispatch({ type: LOGIN_FAILED, error })
    return error
  } 
  try {
    const { UserEmail }  = this.state ;
    const { UserName }  = this.state ;
    const { UserPassword }  = this.state ;
    const res = await fetch('https://lifestormweb.000webhostapp.com/User_Login.php', {
    method: 'POST',
    headers: {
     'Accept': 'application/json',
     'Content-Type': 'application/json',
   },
   body: JSON.stringify({

     email: UserEmail,

     password: UserPassword,

     name: UserName

   })

 }).then((response) => response.json())
       .then((responseJson) => {

         // If server response message same as Data Matched
        if(responseJson === 'Data Matched')
         {
             //Then open Profile activity and send user email to profile activity.
             this.props.navigation.navigate("Profil");

         }
         else{

           Alert.alert(responseJson);
         }

       })
   const success = await res.json()
   return onSuccess(success)
 } catch (error) {
   return onError(error)
 }
};

export const logout = () => {
  return {
    type: 'LOGOUT'
  };
};

Страница Login.js:

 export class Login extends Component {
   state = {
    UserName: '',
    UserEmail: '',
    UserPassword: ''
   }

 userLogin (e) {
      this.props.onLogin(this.state.UserName, this.state.UserEmail, this.state.UserPassword);
      e.preventDefault();
  }

render() {
   return (
    <View style={styles.container}>
     <View style={styles.loginTextCont}>
    <Text style={{fontSize: 36, fontFamily: "Futura" }}>
      Willkommen zu</Text> <Text style={{fontSize: 36, fontFamily: "Futura", color:'#ff0000' }}>LifeStorm!</Text>
    <View style={{width: 10, height: 5 }} />
    </View>
    <TextInput style={styles.inputBox}
        autoCapitalize='none'
        autoCorrect={false}
        autoFocus={true}
        keyboardType='email-address'
        placeholder="Ihre Name"
        placeholderTextColor = "#ffffff"
        selectionColor="#ffffff"
        value={this.state.UserName}
        onChangeText={(text) => this.setState({ UserName: text })} />
    <TextInput style={styles.inputBox}
        autoCapitalize='none'
        autoCorrect={false}
        autoFocus={true}
        keyboardType='email-address'
        placeholder="Ihre E-Mail"
        placeholderTextColor = "#ffffff"
        selectionColor="#ffffff"
        value={this.state.UserEmail}
        onChangeText={(text) => this.setState({ UserEmail: text })} />
    <TextInput style={styles.inputBox}
        placeholder='Password'
        autoCapitalize='none'
        autoCorrect={false}
        placeholder="Ihre Passwort"
        placeholderTextColor = "#ffffff"
        selectionColor="#ffffff"
        secureTextEntry={true}
        value={this.state.UserPassword}
        onChangeText={(text) => this.setState({ UserPassword: text })} />
     <TouchableOpacity
     style={styles.button}
     onPress={(e) => this.userLogin(e)}
     >
       <Text style={styles.buttonText}>Sich einloggen</Text>
     </TouchableOpacity>
    <View style={styles.signupTextCont}>
       <Text style={styles.signupText}>
       Haben Sie kein Konto?
       </Text>
       <TouchableOpacity onPress={()=>this.props.navigation.navigate("Register")}> <Text style={styles.signupButton}> Sich anmelden</Text></TouchableOpacity>
    </View>
  </View>
  );
  }
  }

  const mapStateToProps = (state, ownProps) => {
    return {
     isLoggedIn: state.auth.isLoggedIn,
  };
  }

  const mapDispatchToProps = (dispatch) => {
   return {
    onLogin: (UserName, UserEmail, UserPassword) => { dispatch(login(UserName, UserEmail, UserPassword)); }
   }
   }

export default connect(mapStateToProps, mapDispatchToProps)(Login);

Теперь каждый раз, когда я пытаюсь войти в систему, я получаю следующую ошибку:

Actions must be plain objects. Use custom middleware for async actions

Чего мне не хватает?

Answer 1

Я думаю, что ваша проблема - возвращать ваши объекты успеха / ошибки, а не просто отправлять. Можете ли вы попробовать это и посмотреть, если проблема уходит:

function onSuccess(success) {
     return dispatch({ type: LOGIN, payload: success })
     // return success  -- delete this
}

function onError(error) {
    return dispatch({ type: LOGIN_FAILED, error })
    // return error -- delete this
}