Question

我知道这是常见的问题并且已被多次询问但我已经完成了所有解决方案，但它没有工作。

我尝试从登录表单登录时遇到此错误。

这里的代码我正在附上。

Login.js（查看）

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { ScrollView, Text, TextInput, View, Button,StyleSheet,TouchableOpacity } from 'react-native';
import {loginRequest} from './../redux/actions/auth';
import {bindActionCreators} from 'redux';

class Login extends Component {
    constructor (props) {
        super(props);
        this.state = {
            username: '',
            password: ''
        };
    }

    userLogin (e) {
        this.props.actions.loginRequest(this.state.username, this.state.password);
    }

    render () {
        return (
            <ScrollView style={{padding: 20,backgroundColor:'#ccc'}}>
                <View style = {styles.container}>

                    <View style={{marginLeft:15}}>
                        <Text>Email</Text>
                    </View>

                    <TextInput 
                        style = {styles.input}
                        underlineColorAndroid = "transparent"
                        placeholder = "Enter username"
                        placeholderTextColor = "#9a73ef"
                        autoCapitalize = "none"
                        onChangeText={(text) => this.setState({ username: text })}/>

                    <View style={{marginLeft:15}}>
                        <Text>Password</Text>
                    </View>

                    <TextInput 
                        style = {styles.input}
                        underlineColorAndroid = "transparent"
                        placeholder = "Enter Password > 6 letters"
                        placeholderTextColor = "#9a73ef"
                        autoCapitalize = "none"
                        onChangeText={(text) => this.setState({ password: text })}/>

                    <TouchableOpacity
                        style = {styles.submitButton}
                        onPress={(e) => this.userLogin(e)}>
                        <Text style = {styles.submitButtonText}> Submit </Text>
                    </TouchableOpacity>

                </View>
            </ScrollView>
        );
    }
}

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

function mapDispatchToProps(dispatch){
    return {
        actions : bindActionCreators({
            loginRequest
        },dispatch)
    };
}

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

身份验证操作 在这个动作中我直接调用dispatch而没有任何api调用只是为了测试，但即使它没有工作。

export function loginRequest(username,password) {
    alert("TEst"); // this alert comes
    return function (dispatch) {
        alert(`........Tracker......`); // execution doesn't reach here ,this alert doesn't com 
        if(username == 'admin' && password == 'admin'){
            alert(`Login Success......`);
            dispatch({
                type : 'LOGIN_SUCCESS',
                msg  : 'Logged in successfully.'
            });
            resolve(true);
        } else {
            alert(`Login Failed......`);
            dispatch({
                type : 'LOGIN_FAIL',
                msg  : 'Please make sure you have entered valid credentials.'
            })
            reject(false);
        }
    };
}

这是我的authReducer.js

export default function reducer(state = {},action){
    if(action.type == 'LOGIN_SUCCESS'){
        alert('login success');
        return Object.assign({},state,{
            isLoggedIn:true
        })

    } else if(action.type == 'LOGIN_FAIL'){
        alert('login failed');
        return Object.assign({},state,{
            isLoggedIn:false
        })

    } else {
        return state;
    }
}

和切入点

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View
} from 'react-native';
import {Provider} from 'react-redux';
import store from './redux';
import Application from './pages/Application';

export default class App extends Component{
  render() {
    return (
      <Provider store={store}>
        <Application />
      </Provider>
    );
  }
}

我无法找到任何解决方案，任何人都可以提供帮助吗？

Answer 1

因为要从操作中返回一个函数，所以需要使用中间件来处理返回的函数而不是对象。

我是redux-thunk的粉丝，但是出于这个目的，还有很多其他的redux中间件。

您需要更新商店并将其配置为使用中间件，如下所示：

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from  './reducers';

export default(initialState) => {
    return createStore(rootReducer, initialState, applyMiddleware(thunk));
}

React Native：动作必须是普通对象。使用自定义中间件进行异步操作

1 个答案: