Почему реагирует родной редуктор, вызывается дважды иногда, а иногда только один раз?

Question

Я работаю над приложением React Native.Я все еще новичок в том, чтобы реагировать на родной мир и реагировать на него, поэтому я могу делать что-то не так, что я не знаю, но мне нужна помощьИтак, что происходит сейчас в моем приложении, когда я пытаюсь обновить состояние редуктора, оно вызывает его дважды, обновляя его дважды.

Вот то, что я пытаюсь сделать,

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

Спасибо всем за помощь мне здесь.Поскольку Хелмер упомянул, что это известная ошибка в реагировать на натив, я в конечном итоге использовал Axios для проверки интернет-соединения в handleConnectivityChange каждый раз, когда получаю isConnected = false.И я запускаю код axios в фоновом режиме каждые 5 секунд, пока мое приложение отключено от Интернета и пытается подключиться к Google, и поэтому, если я сталкиваюсь с какой-либо ошибкой или ответом не является 200, я через 5 секунд снова вызываю свою функцию handleConnectivityChange иповторяйте процесс, пока я не получу доступ к Google.

Answer 2

Существует известная проблема с компонентом NetInfo.Кажется, после первого переподключения возвращается false.Я бы изменил ваш подход.Необходимо помнить, что NetInfo информирует о наличии протокольного подключения к Интернету, такого как Wi-Fi или 3G, но не о возможности передачи данных через Интернет.Вы можете попробовать это, оставив WIFI подключенным и отключив кабель передачи данных от интернет-модема.Сигнал Wi-Fi был бы все еще там, но передача данных через Интернет была бы невозможна, однако NetInfo должен был принимать значение true.

У меня была такая же проблема, как и у вас.Каждый раз, когда приложение запускается, я хотел убедиться, есть ли интернет или нет.И мое решение было позвонить www.google.com через fetch or axios при первом запуске приложения.Если это не удается, означает, что нет подключения к Интернету или передачи данных.Вы также должны указать тайм-аут для медленных интернет-соединений.Наконец, каждый раз, когда мне приходилось делать запрос через Интернет, я пытался обработать эту ошибку в методе catch Promise.