prescottprue / react-redux-firebase

Redux bindings for Firebase. Includes React Hooks and Higher Order Components.
https://react-redux-firebase.com
MIT License
2.55k stars 558 forks source link

TypeError: store.getState is not a function when using firebaseConnect() #1055

Open ErinUntermeyer opened 3 years ago

ErinUntermeyer commented 3 years ago

Do you want to request a feature or report a bug?
Bug

What is the current behavior? We just upgraded from react-redux-firebase from "2.1.6" to "3.9.0" and are getting the error message TypeError: store.getState is not a function. (In 'store.getState()', 'store.getState' is undefined) when trying to build. This is the file the error message is pointing to:

export default compose<any>(
  connect(
    (state: State): Partial<MVProps> => ({
      myUserId: get(state, 'user.profile.id'),
      villagers: getFromIds(state.users, state.users.villagers),
    })
  ),
  firestoreConnect(props => [
    {
      collection: 'rooms',
      where: [
        [`type`, '==', 'userToUser'],
        [`users.${props.myUserId}`, '==', true],
      ],
      storeAs: 'myRooms',
    },
  ]),
  firestoreConnect((_, store) => {
    const state = store.getState() as State;
    return flatten(
      defaultTo(state.firestore.ordered.myRooms, []).map((r: Room) =>
        keys(r.users).map((userId: string) => ({
          collection: 'users',
          where: ['userId', '==', userId],
          storeAs: 'myRoomsUsers',
        }))
      )
    );
  }),
  connect(
    (state: State): Partial<MVProps> => ({
      myRooms: state.firestore.ordered.myRooms,
      myRoomsUsers: state.firestore.data.myRoomsUsers,
    })
  )
)(view);

Here's our store creation:

export let store;
export async function getStore() {
  try {
    if (store) {
      return store;
    }

    firestore();
    const envCompose = __DEV__ ? composeWithDevTools : compose;
    const finalCreateStore = envCompose(applyMiddleware(...middleware)
    )(createStore);

    store = finalCreateStore(reduceReducers(rootReducer, crossSliceReducer));

    return store;
  } catch (e) {
    throw e;
  }
}

And our Provider:

    const reduxFirebaseConfig = {
      enableRedirectHandling: false
    };

    const reduxFirebaseProps = {
      firebase,
      config: reduxFirebaseConfig,
      dispatch: this.state.store.dispatch,
      createFirestoreInstance,
      initializeAuth: false,
    };

    return (
      <Provider store={this.state.store}>
        <ReactReduxFirebaseProvider {...reduxFirebaseProps}>
          <RouterWithRedux
            getSceneStyle={this.getSceneStyle}
            scenes={AppRoutes}
          />
        </ReactReduxFirebaseProvider>
      </Provider>
    );

We understand that firebaseConnect only takes one argument now, and it's props, but are unsure how it had access to the store before prior to the upgrade and now it doesn't. How do we gain access to the store inside of firebaseConnect now?

What is the expected behavior? Successful build

Which versions of dependencies, and which browser and OS are affected by this issue? Did this work in previous versions or setups?

"react-native": "0.63.4"
"react-redux": "^7.2.2"
"@react-native-firebase/app": "^10.3.0"
prescottprue commented 3 years ago

You should be able to use a connect before your usage of firebaseConnect to pull out of the store state