从 app.js 响应本机更新 redux 存储不工作

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

但是 setCurrentLocation 并没有被 app.js

触发

请帮忙。

谢谢

Answer 1

您忘记连接了mapDispatchToProps:

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

Answer 2

您正在尝试从 App.js 调度一个 redux 操作，这是您的应用程序的入口点，也是您初始化 redux 存储的地方。您可以在 Provider 组件内的任何连接组件 中使用 this.props.setCurrentLocation(position)，但 App.js 在 Provider 组件之外。

所以你需要这样称呼它：

store.dispatch(setCurrentLocation(position))

我试过运行你的零食，看看你是否有任何其他问题，但它抛出了一个错误。

希望对您有所帮助

从 app.js 响应本机更新 redux 存储不工作

react native updating redux store from app.js not working

react-native

react-redux

geolocation

redux-persist