React-Native（redux）错误：在“Connect（App）”的上下文中找不到“store”

Question

我在我的 react-native 应用程序中遇到了这个奇怪的错误。 当我从 firebase 数据库中获取用户时，我使用 redux 来保存用户。 这是错误：

这是我在 App.js 中的代码：

import { StatusBar } from 'expo-status-bar';
import React, { useEffect } from 'react';
import { StyleSheet, Text, View, ToastAndroid } from 'react-native';
import firestore from '@react-native-firebase/firestore';
import RNBootSplash from "react-native-bootsplash";
import auth from '@react-native-firebase/auth';

// Navigation
import { NavigationContainer } from '@react-navigation/native';
import BottomTabNavigator from './src/navigation/BottomTabNavigation';
import AuthenticationStack from './src/navigation/AuthenticationStack';

// redux imports
import { Provider } from 'react-redux';
import { saveUserPrefs, saveUser } from './src/redux';
import {store} from './src/redux'
import { connect } from 'react-redux';


const App = (props) => {

  const { saveUserPrefs, saveUser } = props;


  let isLoggedIn = false;


  useEffect(() => {
 
    auth().onAuthStateChanged((user) => {
      // if not already login go back to login screen
      if(!user){
          isLoggedIn = false;
      } else {
          isLoggedIn = true
          RNBootSplash.hide({ fade: true }); // hide the splash screen
          ToastAndroid.show("Logged In", ToastAndroid.SHORT);
          // save the user & userPrefs in store (redux)
          saveUser(user);
          saveUserPrefs(user.uid);
      }
  });
  }, [])
    
  return (
    <Provider store={store}>
      <NavigationContainer>
        {isLoggedIn ? <BottomTabNavigator /> : <AuthenticationStack />}
      </NavigationContainer>
    </Provider>
  );
}

const mapStateToProps = (state) => ({
  userReducer: state.userReducer
})


export default connect(mapStateToProps, { saveUserPrefs , saveUser})(App);

这是我的 redux 代码：

import axios from 'axios';
import thunk from 'redux-thunk';
import { combineReducers, createStore, applyMiddleware } from 'redux'
import firestore from '@react-native-firebase/firestore';

// Actions
export const saveUserPrefs = (userId) => {
    return async (dispatch) => {

        try { 
            console.log('in userlogin function');  
            const data = await firestore().collection('Users').doc(userId).collection('userPrefs').get();
            dispatch({ type: 'SAVE_USER_PREFS', payload: data.docs[0]._data });
        } catch (err) {
            dispatch({ type: 'ON_ERROR', payload: err });
        }

    }
}

export const saveUser = (user) => {
    return async (dispatch) => {

        try {
            dispatch({ type: 'SAVE_USER', payload: user})
        } catch (err) {
            dispatch({ type: 'ON_ERROR', payload: err });
        }

    }
}

// reducers

const userReducer = (state = {}, action) => {

    switch(action.type){
        case 'SAVE_USER_PREFS':
            return {
                ...state,
                userPrefs: action.payload
            }
        case 'SAVE_USER':
            return {
                ...state,
                user: action.payload
            }
        case 'ON_ERROR':
            return {
                ...state,
                appError: action.payload
            }
        default:
            return state;
    }

}

// root reducer
export const rootReducer = combineReducers({
    userReducer,
})


// store
export const store = createStore(rootReducer, applyMiddleware(thunk));

我是 redux 的新手，但我读到我必须将连接方法放在我用来获取操作的组件中，以便保存在商店中。

Answer 1

在App component中，您无法connect到 redux
只需将您的应用程序包装在具有Provider的另一个组件中

示例代码

const AppWrapper = () => {
  return (
    <Provider store={store}>
      <App />
    </Provider>
  );
};

并且记得在你的App component中删除<Provider store={store}>