Using Expo AppLoading to preload data from firebase

I am trying to use AppLoading on Expo to preload data from firebase, before the app goes to the homepage. I keep receiving an error.

“Error: could not find react-redux context value; please ensure the component is wrapped in a < Provider > “

import React, { useState } from "react";
import { createStore, combineReducers, applyMiddleware } from "redux";
import { Provider } from "react-redux";
import ReduxThunk from "redux-thunk";
import productsReducer from "./store/productReducer";
import createdProducts from "./store/createdProductReducer";
import storeName from "./store/StoreNameReducer";
import authReducer from "./store/authReducer";
import { useDispatch } from "react-redux";
import * as ProdActions from "./store/productActions";
import AppLoading from "expo-app-loading";

import InventoryNavigator from "./navigation/InventoryNavigator";

const rootReducer = combineReducers({
  products: productsReducer,
  availableProducts: createdProducts,
  auth: authReducer,
  storeName: storeName,
});

const store = createStore(rootReducer, applyMiddleware(ReduxThunk));

export default function App() {
  const [fireBLoaded, setFireBLoaded] = useState(false);
  const dispatch = useDispatch();
  const fetchFirebase = () => {
    dispatch(ProdActions.fetchAvailableProducts());
    dispatch(ProdActions.fetchStoreName());
    dispatch(ProdActions.fetchProducts());
  };
  if (!fireBLoaded) {
    return (
      <AppLoading
        startAsync={fetchFirebase}
        onFinish={() => setFireBLoaded(true)}
        onError={console.warn}
      />
    );
  } else {
    return (
      <Provider store={store}>
        <InventoryNavigator />
      </Provider>
    );
  }
}

what I have tried:

  const fetchFirebase = async () => {

any help would be greatly appreciated, I am still new to React Native.

Answer

The error tells that there is no Redux.Provider when fetching from Firebase.

To fix it, you should also wrap you <AppLoading ... /> into that <Provider store={store}> ....

It should look like following:

  <Provider store={store}>
     <AppLoading ... />
  <Provider/>

Advertisement

Answer