react native updating redux store from app.js not working

Question

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

I have below code in app.js in

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 file

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

export { setCurrentLocation };

But this setCurrentLocation is not being fired from app.js

please help.

Thanks

Answer 1

You are trying to dispatch a redux action from App.js which is the entry point of your application and where you initialise your redux store. You can use this.props.setCurrentLocation(position) from any connected component within the Provider component, but App.js is outside of it.

So you need to call it like so:

store.dispatch(setCurrentLocation(position))

I tried to run your snack to see if you have any other issues but it throws an error.

Hope this helps