реагировать на собственное обновление сайта редукса из app.js не работает - PullRequest
Новая
       28

реагировать на собственное обновление сайта редукса из app.js не работает

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

https://snack.expo.io/@mparvez19861/redux-example

У меня есть код ниже в app.js в 

import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View } from 'react-native';
import Geolocation from 'react-native-geolocation-service';
import firebase from './FireBaseSetup/Firebase'
// import DrawerNavigatorExample from './Navigations';
import Navigator from './Navigator'
import Permissions from 'react-native-permissions'
import { PermissionsAndroid } from 'react-native';
import PermissionsList from './Utitliy/PermissionsList'
import Contacts from 'react-native-contacts';
import { Provider, connect } from 'react-redux';
import { store, persistor, setCurrentLocation } from './redux/app-redux';
import { PersistGate } from 'redux-persist/integration/react'
import SplashScreen from './screens/SplashScreen'


const mapDispatchToProps = (dispatch) => {
    return {
        setCurrentLocation: (location) => { dispatch(setCurrentLocation(location)) }
    };
}
const ConnectedApp = connect(mapDispatchToProps)(Navigator);
export default class App extends Component {
    constructor(props) {
        super(props);

        this.state = {
            latitude: null,
            longitude: null,
            error: null,

        };
    }

    async componentDidMount() {
        this.getContacts();
        await new PermissionsList().requestLocationPermission();
        Geolocation.getCurrentPosition(
            (position) => {
                // this.setState({
                //     latitude: position.coords.latitude,
                //     longitude: position.coords.longitude,
                //     error: null,
                // });
                this.props.setCurrentLocation(position);
                firebase.firestore().collection('locations').doc('8686').set({
                    locations: position
                })
            },
            (error) => alert(JSON.stringify(error)),
            { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000, distanceFilter: 100 }
        );
        this.watchId = Geolocation.watchPosition(
            (position) => {
                // this.setState({
                //     latitude: position.coords.latitude,
                //     longitude: position.coords.longitude,
                //     error: null,
                // });
                this.props.setCurrentLocation(position);
                firebase.firestore().collection('locations').doc('8686').set({
                    locations: position
                })
            },
            (error) => this.setState({ error: error.message }),
            { enableHighAccuracy: false, timeout: 20000, maximumAge: 10000, distanceFilter: 1 },
        );
    }

    componentWillUnmount() {
        Geolocation.clearWatch(this.watchId);
    }

    render() {
        return (
            <Provider store={store}>
                <PersistGate loading={null} persistor={persistor}>
                    <View style={styles.container}>
                        <ConnectedApp />
                    </View>
                </PersistGate>
            </Provider>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
    },
});

Navigator.js 

import React, { Component } from 'react';
import { View, Text, TouchableHighlight, Image } from 'react-native';
import { createDrawerNavigator, createStackNavigator , createSwitchNavigator, createAppContainer } from 'react-navigation';
import {
  ActivityIndicator,
  AsyncStorage,
  Button,
  StatusBar,
  StyleSheet
} from 'react-native';

// import firebase from 'react-native-firebase';
// import { store } from '../redux/app-redux';


import Screen2 from './screens/Screen2';
import SplashScreen from './screens/SplashScreen'
import Login from './screens/Login'
import SignOutScreen from './screens/SignOutScreen'
import screendesign from './screens/screendesign'
import EmailPwdLogin from './screens/EmailPwdLogin'
import friends from './screens/friends'

import LoginScreen from './screens/LoginScreen';
import SignupScreen from './screens/SignupScreen';




const AuthStack = createStackNavigator({
  // { SignIn: SignInScreen }
  // SignIn: { screen: EmailPwdLogin }
    Login: { screen: Login },
    Signup: { screen: SignupScreen },
  });
const drNav = createDrawerNavigator(
  {

     friends: {
      screen: friends
    },
    Screen2: {
        screen: Screen2
      },
     SignOut: {
      screen: SignOutScreen
    }
  }
)

export default createAppContainer(createSwitchNavigator(
  {
    // screendesign: screendesign,
    SplashScreen: SplashScreen,
    App: drNav,
    AuthStack: AuthStack
  },
  {
    initialRouteName: 'SplashScreen',
  }
));

Redux файл 

const setCurrentLocation = (location) => {
  alert(JSON.stringify(location))
  return {
    type: "setCurrentLocation",
    value: location
  };
};

export { setCurrentLocation };

Но этот setCurrentLocation не запускается из app.js

, пожалуйста, помогите.

Спасибо

Ответы [ 2 ]

1 голос
/ 22 апреля 2019

Вы пытаетесь отправить действие избыточности из App.js, который является точкой входа вашего приложения и где вы инициализируете свое хранилище избыточности. Вы можете использовать this.props.setCurrentLocation(position) из любого подключенного компонента в пределах компонента Провайдера, но App.js находится за его пределами.

Так что вам нужно назвать это так: 

store.dispatch(setCurrentLocation(position))

Я попытался запустить ваш перекус, чтобы увидеть, есть ли у вас другие проблемы, но он выдает ошибку.

Надеюсь, это поможет

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

Вы забыли подключиться mapDispatchToProps: 

export default connect(mapStateToProps,mapDispatchToProps)(App);
...