Question

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 };

但是未从app.js中触发此 setCurrentLocation

请帮助。

谢谢

Answer 1

您忘记连接mapDispatchToProps：

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

Answer 2

您正在尝试从App.js调度redux操作，这是您应用程序的入口，也是您在其中初始化redux存储的地方。您可以在提供程序组件内的任何连接的组件中使用this.props.setCurrentLocation(position)，但App.js不在此范围内。

所以您需要这样称呼它：

store.dispatch(setCurrentLocation(position))

我试图给您的零食看一下是否还有其他问题，但这会引发错误。

希望这会有所帮助

反应来自app.js的本地更新redux存储不起作用

2 个答案: