Redux，关闭React Native Remote JS Debugger时Thunk不起作用

Question

我正在尝试构建我的第一个React Native应用。在所有这些期间，我在打开Remote JS Debugger的情况下运行了该应用程序。一切运行顺利，我使用Axios调用了API，并通过redux保留了数据。

但是一旦我关闭调试器，一切都将停止工作。没有错误日志产生。我无法真正确定实际情况。轻按按钮（调用操作创建者）无效。

下面是与问题相关的代码。

LoginScreen.js

import React, { Component } from 'react';
import Icon from "react-native-fontawesome-pro";
import LinearGradient from 'react-native-linear-gradient';
import { connect } from 'react-redux';
import { View, Text, StyleSheet, Image, TouchableOpacity, LayoutAnimation, KeyboardAvoidingView } from 'react-native';
import { CustomInput, LoginButton, MessageBox } from '../components';

import * as actions from '../actions';
import func from '../Functions';
import CONST from '../Const';

class LoginScreen extends Component {
    state = {
        username: null,
        password: null,
        focusPassword: false,
    }

    componentWillUpdate() {
        LayoutAnimation.spring();
    }

    _renderMessageBox = () => {
        if ( typeof this.props.message.login !== "undefined" ){
            const { message, success } = this.props.message.login;
            if ( typeof success !== "undefined" && ! success ){
                return (
                    <MessageBox text={ message } color="translucent" />
                );
            }
        }
    }

    _handleEmailOnSubmit = () => {
        this.setState({ focusPassword: true });
    }

    _loginHelper = () => {
        var { username, password } = this.state;

        this.setState({ focusPassword: false });
        this.props.doLogin(username, password);
    }

    render(){
        const { loginContainer, loginFormContainer, loginTitle, loginSubtitle, loginButton, backButton, absoluteLogo, loginHeader } = styles;
        const placeholderTextColor = 'rgba(255,255,255,.5)';

        return (
            <KeyboardAvoidingView
                style={{ flex: 1 }}
                enabled={true}
                behavior={CONST.IS_IOS ? "padding" : null}
                keyboardVerticalOffset={CONST.IS_ANDROID ? 50 : 0}>
                <LinearGradient colors={['#3E6BE0', '#3A75D9', '#51D5F4']} style={loginContainer}>
                    <View style={loginHeader}>
                        <TouchableOpacity onPress={() => this.props.navigation.navigate('Welcome')} style={backButton}>
                            <Icon name="arrow-left" color="white" type="solid" size={25} />
                        </TouchableOpacity>

                        <Text style={loginTitle}>Login</Text>
                        <Text style={loginSubtitle}>Hi, please login to continue.</Text>
                    </View>
                    <View style={loginFormContainer}>
                        { this._renderMessageBox(this.props.navigation) }
                        <CustomInput
                            icon="user"
                            placeholder="Email or username"
                            autoCorrect={false}
                            returnKeyType='next'
                            onSubmitEditing={this._handleEmailOnSubmit}
                            autoCapitalize={'none'}
                            blurOnSubmit={false}
                            onChangeText={text => this.setState({ username: text })}
                            placeholderTextColor={placeholderTextColor}
                            />

                        <CustomInput
                            icon="key"
                            focus={this.state.focusPassword}
                            placeholder="Password" 
                            autoCorrect={false}
                            returnKeyType='go'
                            onChangeText={text => this.setState({ password: text })}
                            onSubmitEditing={this._loginHelper}
                            secureTextEntry={true}
                            placeholderTextColor={placeholderTextColor} 
                            />

                        <LoginButton
                            style={loginButton}
                            onPress={this._loginHelper}
                            fontSize={15}>
                            LOGIN
                        </LoginButton>
                    </View>

                    <Image source={require('../media/giff_logo_white.png')} style={absoluteLogo} />
                </LinearGradient>
            </KeyboardAvoidingView>
        );
    }
}

const styles = StyleSheet.create({
    loginHeader: {
        width: '100%',
        alignSelf: 'stretch'
    },

    loginContainer: {
        flex: 1,
        paddingTop: CONST.IS_IOS ? 25 : 0,
        paddingLeft: 50,
        paddingRight: 50,
        justifyContent: 'center',
    },
    loginFormContainer: {
        marginTop: 50,
        marginBottom: 50,
    },
    backButton: {
        width: 45,
        height: 45,
        padding: 10,
        marginLeft: -10,
        marginBottom: 10,
        alignItems: 'center',
        justifyContent: 'center'
    },
    loginTitle: {
        color: '#FFF',
        fontSize: 26,
        fontWeight: '800',
    },
    loginSubtitle: {
        color: '#EEE',
        fontSize: 15,
        fontWeight: '700',
        paddingTop: 5
    },
    loginButton: {
        width: 110,
        height: 45,
        marginTop: 20,
        alignSelf: 'center',
        alignItems: 'center',
        borderRadius: 50,
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 8 },
        shadowRadius: 8,
        shadowOpacity: 0.09,
        justifyContent: 'center',
        backgroundColor: '#FFF',
    },

    absoluteLogo: {
        width: 100,
        height: 100,
        alignSelf: 'center',
    }
});

const mapStateToProps = state => {
    return state;
};

export default connect(mapStateToProps, actions)(LoginScreen);

actions.js

export const doLogin = ( username, password ) => {
    return async (dispatch, getState) => {
        const params = func.createParams({
            username: username,
            password: password
        });

        axios.post(func.getApi('login'), params)
        .then(response => {
            var { data } = response;
            var { message, color, success, session_data, user_data, user_data_friendly } = data;

            if ( typeof success !== "undefined" && success === false ){
                dispatch( setMessage("login", message, color, success) );
                return;
            }

            console.log( "Response from doLogin()", response.data );

            dispatch( updateUserData(user_data, user_data_friendly) );
            dispatch( setSession(session_data) );
        })
        .catch(e => console.error(e));
    };
}

App.js

import React, { Component } from 'react';
import { Provider, connect } from 'react-redux';
import { Platform } from 'react-native';
import { createStore, applyMiddleware } from 'redux';
import { configureFontAwesomePro } from "react-native-fontawesome-pro";
import { persistReducer, persistStore } from 'redux-persist';
import { PersistGate } from 'redux-persist/integration/react';

import thunk from 'redux-thunk';
import storage from 'redux-persist/lib/storage';
import reducers from './reducers';
import RootNavigator from './RootNavigator';
import SplashScreen from 'react-native-splash-screen';

const persistConfig = {
    key: 'root',
    blacklist: ['message'],
    storage
}

// const persistedReducer = persistReducer(persistConfig, reducers);
// const store = createStore(persistedReducer, applyMiddleware(thunk));
// const persistor = persistStore(store);

const store = createStore(reducers, applyMiddleware(thunk));

export default class App extends Component {
    componentDidMount() {
        configureFontAwesomePro( "regular" );

        if ( Platform.OS == "ios" )
            SplashScreen.hide();
    }

    render() {
        return (
            <Provider store={store}>
                {/* <PersistGate loading={null} persistor={persistor}> */}
                    <RootNavigator />
                {/* </PersistGate> */}
            </Provider>
        );
    }
}