javascript - 为什么 react native redux reducer 有时被调用两次有时只被调用一次？

Question

我正在开发 React Native 应用程序。我对本地 react 和 react 世界还是陌生的，所以我可能在这里做错了我不知道但我需要帮助的事情。所以当我尝试更新 reducer 状态时，我的应用程序现在正在发生什么，它调用它两次，更新它两次。

这是我想做的，

1) When app opens, set default `deviceData` object.
2) Check for internet connection and update device data.
3) I disable internet that updates `deviceData` object once.
4) I enable internet and that updates `deviceData` object twice where it comes back as false.

这是我的代码，

NoInternet.js 文件

import React, {PureComponent} from 'react';
import {View, Text, NetInfo, Dimensions, StyleSheet} from 'react-native';
import {statusBarHeight} from "./AppBar";
import {RED_DARKEN_THREE} from "./colors";
import {connect} from "react-redux";
import {updateInternetState} from '../actions/internetStateChangeAction';

const {width} = Dimensions.get('window');

function MiniOfflineSign() {
    return (
        <View style={styles.offlineContainer}>
            <Text style={styles.offlineText}>No Internet Connection</Text>
        </View>
    );
}

class OfflineNotice extends PureComponent {
    state = {
        isConnected: true
    };

    componentDidMount() {
        NetInfo.isConnected.addEventListener('connectionChange', this.handleConnectivityChange);
    }

    componentWillUnmount() {
        NetInfo.isConnected.removeEventListener('connectionChange', this.handleConnectivityChange);
    }

    handleConnectivityChange = isConnected => {
        this.setState({isConnected});
        this.props.updateConnectivityChange({isConnected});
    };

    render() {
        if (!this.state.isConnected) {
            return <MiniOfflineSign/>;
        }
        return null;
    }
}

const styles = StyleSheet.create({
    offlineContainer: {
        backgroundColor: RED_DARKEN_THREE,
        height: 30,
        justifyContent: 'center',
        alignItems: 'center',
        flexDirection: 'row',
        width,
        position: 'absolute',
        top: statusBarHeight,
    },
    offlineText: {
        color: '#fff',
        fontFamily: "Muli-Regular",
    }
});

function mapStateToProps(state, {navigation}) {
    return {
        state,
        navigation
    };
}
const mapDispatchToProps = dispatch => ({
    updateConnectivityChange: ({isConnected}) => {
        dispatch(updateInternetState({isConnected}));
    }
});

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

---

internetStateChangeAction.js 文件

export const UPDATE_INTERNET_STATE = 'UPDATE_INTERNET_STATE';

export const updateInternetState = data => ({
    type: UPDATE_INTERNET_STATE,
    data,
});

---

deviceReducer.js 文件

import {Platform} from 'react-native';
import {UPDATE_INTERNET_STATE} from '../actions/internetStateChangeAction';

const deviceData = {
    deviceType: Platform.OS,
    deviceID: null,
    isInternetAvailable: true,
};


const deviceDataReducer = (state = deviceData, action) => {
    switch (action.type) {
        case UPDATE_INTERNET_STATE:
            return {
                ...state,
                isInternetAvailable: action.data.isConnected
            };
        default:
            return state;
    }
};

export default deviceDataReducer;

---

这是我的调试日志，

如您所见，有四个操作日志。

1) First action is default when app is opened and it is called to check internet connection.
2) Second action is when I disable internet in my iMac by disconnecting from wifi (I am developing this app on iMac and using iOS simulator)
3) HERE IS THE MOST IMPORTANT PART, I should see only one action when I enable wifi access in my iMac and connect to internet. Which happens as third action and internet connection as true
4) But there is fourth action called automatically which returns false and that fails everything.

如果我再次禁用互联网并再次启用，它会再次调用两次，我得到以下结果，

我不知道我哪里做错了什么!

谢谢大家!

Answer 1

NetInfo 组件存在一个已知问题。第一次重新连接后似乎返回 false。我会改变你的方法。您需要记住，NetInfo 会通知是否存在与 Internet 的协议(protocol)连接(如 WiFi 或 3G)，但不会通知是否可以通过 Internet 传输数据。您可以通过保持 WIFI 连接并从互联网调制解调器上拔下数据电缆来尝试此操作。 Wifi 信号仍然存在，但无法通过互联网传输数据，但 NetInfo 应该返回 true。

我遇到了和你一样的问题。每次应用程序启动时，我都想确定是否有互联网。我的解决方案是在首次启动应用程序时通过 fetch 或 axios 调用 www.google.com。如果失败，则意味着没有互联网连接或数据传输。您还应该为缓慢的互联网连接设置超时。最后，每次我不得不通过互联网发出请求时，我都会尝试在 Promise 的 catch 方法中处理该错误。