Соединение компонентов с React-Redux - PullRequest
Новая
       11

Соединение компонентов с React-Redux

0 голосов
/ 15 апреля 2019

Я использую Expo React Native для разработки мобильного приложения с помощью Redux, а также React-Redux.С React-Redux v6.0 я могу без проблем подключать компоненты, но не могу получить состояние из хранилища с v6.0, хотя с помощью Logger Middleware мое состояние уже обновлено.Я не могу использовать его после извлечения с mapStateToProps.Поэтому я решил обновить React-Redux до v7.0 в надежде, что проблемы будут решены, но я встретил новый (рисунок ниже).

Экран проблемы

Это мой App.js 

import React from 'react';
import { Platform, StyleSheet, Text, View} from 'react-native';
import {Provider} from 'react-redux';
import store from './src/redux/configureStore';
import LocationShow from './src/components/LocationShow';

export default class App extends React.Component {
   render() {
    return (
     <Provider store={store}>
       <View style={styles.container}>
         <LocationShow />
       </View>
     </Provider>
    );
   }
  }

const styles = StyleSheet.create({
 container: {
 flex: 1,
 backgroundColor: '#fff',
 alignItems: 'center',
 justifyContent: 'center',
 },
});

Это мой LocationShow.js 

import React from 'react';
import {View, Text, StyleSheet, ActivityIndicator} from 'react-native';
import {Location, Permissions, Constants} from 'expo';
import {connect} from 'react-redux';
import {Platform} from 'expo-core';
import * as locationActions from '../redux/actions/locationActions';

class LocationShow extends React.Component {
  componentDidMount = async () =>{
    if (Platform.OS === 'android' && !Constants.isDevice){
        console.log('Switch to the real device dawg!')
    }else{
        await this.props.getCurrentLocation();
    }    
  }

render(){
    return(
        <View>
        {this.props.isLoading ?
            <ActivityIndicator/>:
            <View>
                <Text>Latitude:{this.props.latitude}</Text>
                <Text>Longitude:{this.props.longitude}</Text>
            </View>
        } 
        </View>      
    )
   } 
}   

const mapStateToProps = (state) =>{
    return{
        latitude: state.latitude,
        longitude: state.longitude,
        error: state.error,
        isLoading: state.isLoading
    }
}

const mapDispatchToProps = (dispatch) =>{
    return {
        getCurrentLocation: () => 
dispatch(locationActions.getCurrentLocation())
    }
}

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

const styles = StyleSheet.create({
container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
}
});

Я прочитал изменения v7.0 с помощью connect (), но я довольно новРеагируйте так, что я не могу понять это.

Примечание: connect теперь использует React.memo () внутри, что возвращает специальный объект, а не функцию.Любой код, который предполагал, что компоненты React являются только функциями, является неправильным и ошибочным с момента выпуска React 16.6.Если вы использовали PropTypes для проверки правильности типов компонентов, вам следует вместо этого перейти с PropTypes.func на PropTypes.elementType.

Я работаю React: v16.8.6, React-Native: 0.57.1,React-Redux: v7.0.2, Redux: v4.0.1

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

1 Ответ

0 голосов
/ 16 апреля 2019

Подумав, я решил вернуться к версии 6.0.1 активного реагирования.Теперь все работает как чемпион.Эту тему можно закрыть прямо сейчас.Кстати, проблема как раз и заключается в новом connect (), потому что командаact-redux использует React.memo () и Hooks.Но я до сих пор не понимаю, почему это проблема, поэтому, если у кого-то есть идеи об изменениях версии 7.0.2 с новым connect (), не стесняйтесь объяснять.Спасибо, ребята!

...