react-redux-firebase icon indicating copy to clipboard operation
react-redux-firebase copied to clipboard

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

Open ErinUntermeyer opened this issue 4 years ago • 1 comments

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"

ErinUntermeyer avatar Jan 14 '21 22:01 ErinUntermeyer

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

prescottprue avatar Jan 24 '21 05:01 prescottprue