Warning: Failed prop type: The prop `dispatch` is marked as required in `FirestoreConnect(Connect(Container))`, but its value is `undefined`

[alexpchin]

Since trying to upgrade to react-redux-firebase, I'm trying to use:

• "react-redux-firebase": "3.0.0-alpha.5"
• "redux-firestore": "^0.6.2"
• "react-redux": "6.0.0"
• "redux-persist": "^5.10.0"

This is sort of a stackOverflow question (I'm aware). However, I think it might be related to the firebaseConnect function since the update? Also the docs are difficult to follow for the combination of react-redux-firebase and redux-persist for the newer version.

I'm getting the error: Warning: Failed prop type: The propdispatchis marked as required inFirestoreConnect(Connect(Container)), but its value isundefined`

This is my setup of my store:

import { applyMiddleware, createStore, compose } from "redux";
import { persistStore } from "redux-persist";
import thunk from "redux-thunk";
import { rootReducer } from "../reducers";
import { persistReducer } from "redux-persist";
import storage from "redux-persist/lib/storage";

const persistConfig = {
  key: "root",
  storage,
  blacklist: []
};

const middlewares = [thunk];

const storeEnhancers = [applyMiddleware(...middlewares)];
const composedEnhancers = compose(...storeEnhancers);
const persistedReducers = persistReducer(persistConfig, rootReducer);
const initialState = {};
export const store = createStore(
  persistedReducers,
  initialState,
  composedEnhancers
);
export const persistor = persistStore(store);

const configureStore = () => {
  return { store, persistor };
};

export default configureStore;

my rootReducer:

import { combineReducers } from "redux";
import storage from "redux-persist/lib/storage"; // defaults to localStorage for web and AsyncStorage for react-native

import { users } from "./users";
import { photos } from "./photos";
import { conversations } from "./conversations";
import { messages } from "./messages";

import { firebaseReducer } from "react-redux-firebase";
import { firestoreReducer } from "redux-firestore";

export const appReducer = combineReducers({
  firebase: firebaseReducer,
  firestore: firestoreReducer
});

export const rootReducer = (state = {}, action) => {
  if (action.type === "LOG_OUT_SUCCESS") {
    Object.keys(state).forEach(key => {
       storage.removeItem(`persist:${key}`);
    });
    state = undefined;
  }

  return appReducer(state, action);
};

and App.js:

import React from "react";
import { YellowBox, View } from "react-native";
import { AppLoading, Asset, Font } from "expo";
import { Ionicons, MaterialIcons } from "@expo/vector-icons";
import { Provider } from "react-redux";
import { PersistGate } from "redux-persist/es/integration/react";
import stores from "./stores";
import NavigationService from "./navigation/NavigationService";
import { RootNavigation } from "./navigation";
import { ReactReduxFirebaseProvider } from "react-redux-firebase";
import { createFirestoreInstance } from "redux-firestore";
import Fire from "./lib/fire";

// Turn off debugger warning
YellowBox.ignoreWarnings(["Remote debugger"]);

const { persistor, store } = stores();

const rrfConfig = {
  userProfile: "users",
  useFirestoreForProfile: true,
  enableLogging: true,
  enableRedirectHandling: false
};

const rrfProps = {
  firebase: Fire.firebase,
  config: rrfConfig,
  dispatch: store.dispatch,
  createFirestoreInstance // <- needed if using firestore
};

export default class App extends React.Component {
  state = {
    isLoadingComplete: false
  };

  render() {
    const { isLoadingComplete } = this.state;
    if (!isLoadingComplete) {
      return (
        <AppLoading
          startAsync={this._loadAssetsAsync}
          onError={this._handleLoadingError}
          onFinish={this._handleFinishLoading}
        />
      );
    } else {
      return (
        <Provider store={store}>
          <PersistGate persistor={persistor}>
            <ReactReduxFirebaseProvider {...rrfProps}>
              <RootNavigation
                ref={navigatorRef => {
                  NavigationService.setTopLevelNavigator(navigatorRef);
                }}
              />
            </ReactReduxFirebaseProvider>
          </PersistGate>
        </Provider>
      );
    }
  }

  _loadAssetsAsync = async () => {
    return Promise.all([
      Asset.loadAsync([
        require("./assets/images/placeholder.png")
      ]),
      Font.loadAsync({
        ...Ionicons.font,
        ...MaterialIcons.font
      })
    ]);
  };

  _handleLoadingError = error => {
    console.error(error);
  };

  _handleFinishLoading = async () => {
    this.setState({ isLoadingComplete: true });
  };
}

Any ideas?

[prescottprue]

Yup, I had already been working on a fix for this (its in react-redux-firebase) and I'll try to get it out soon. It is just some incorrect prop types that were missed before. Thanks for reporting.

[prescottprue]

Fixed in v3.0.0-alpha.6 release of react-redux-firebase which available through the next tag.