React-redux-firebase: Support React-Redux v6

[markerikson]

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

Bug / compatibility issue.

What is the current behavior?

FirestoreConnect currently tries to access the Redux store out of legacy context:

https://github.com/prescottprue/react-redux-firebase/blob/34b8f08e4f221ba9d04fdeeb071a26f393cfd9ff/src/firestoreConnect.js#L32

That's never been part of the React-Redux public API. React-Redux v6 now uses new context internally, so that breaks this library.

You'll need to rework the internals to access the Redux store a different way, likely using the ReactReduxContext instance exported from React-Redux.

See https://github.com/supasate/connected-react-router/pull/191 for an example of how connected-react-router is handling the change, and some related discussion at https://github.com/reduxjs/react-redux/issues/1083 .

What is the expected behavior?

Should render okay with no errors.

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

Fails with React-Redux v6.0.0, works with v5.x and earlier.

[geminiyellow]

👍 thank you @markerikson , that help me

[prescottprue]

@markerikson Thank you for reporting this! I am adding it to the proposed features in the v3.0.0 roadmap. That said, I wonder if this is a big enough change/rewrite to excuse trying out the move to the single repo for all of the redux-firebase tools 👀 (been wanting to do this for a long while for a number of reasons).

[AdrienLemaire]

@prescottprue can you add a timeline estimate to the roadmap ?
react-redux v6 also breaks a lot of stuff in my project (not a good idea to write unittests with store as a props), and I'd love to organize myself as to match with the release of react-redux-firebase v3 (or redux-firebase v1).

[prescottprue]

I avoided that initially since it is hard to say accurately for a number of the features, especially this one since it is such a re-write. I will try to add timelines as soon as I can get a better understanding of scope though, so thanks for the suggestion.

A good way to go for now is to assume that you should build for how things are currently. I try to keep a clear/visible update path for major breaking changes since there are a number of production applications that myself and others I work with will have to upgrade. If certain features need to be moved to other future versions or redux-firebase v1, then that will happen.

[prescottprue]

Started looking into this, and I was able to get a change working with firebaseConnect in the simple example. It was a pretty major change like we were thinking, and actually doesn't use store for the firebase instance at all:

NOTE: This is just a prototype I threw together, and is not an available API. Just showing how I got things working

// Initialize Firebase instance
firebase.initializeApp(fbConfig)

const App = () => (
  <Provider store={store}>
    <ReactReduxFirebaseProvider firebase={firebase} config={fbConfig} dispatch={store.dispatch}>
      <Home />
    </ReactReduxFirebaseProvider>
  </Provider>
)

Then it doesn't even require the store enhancer anymore! I also exposed ReactReduxFirebaseConsumer (used in firebaseConnect to get the enhanced instance from context).

The main downside being that it requires react 16 since it uses createContext.

Its not available on npm yet, but I'm going to work on getting this into a v3.0.0 pre-release version as soon as possible. The API may change, so please share your input on naming or patterns. Since this is such a drastic change in architecture I want to make sure there is a path forward for upgrading from previous versions.

[markerikson]

Since React-Redux v6 requires a minimum of React 16.4, I don't think that's going to be an issue. In fact, I'd suggest you do the same.

[prescottprue]

Just started the provider for firestore.

When using just Firestore, the provider setup is like so:

import firebase from 'firebase/app'
import 'firebase/auth'
import 'firebase/database'
import 'firebase/firestore' // make sure you add this for firestore
import { Provider } from 'react-redux'
import { ReactReduxFirebaseProvider } from 'react-redux-firebase';
import { createFirestoreInstance } from 'redux-firestore';
import { firebase as fbConfig, reduxFirebase as rrfConfig } from './config'

// Initialize Firebase instance
firebase.initializeApp(fbConfig)

const App = () => (
  <Provider store={store}>
    <ReduxFirestoreProvider
      firebase={firebase}
      config={rrfConfig}
      dispatch={store.dispatch}
      createFirestoreInstance={createFirestoreInstance}>
      <Home />
    </ReduxFirestoreProvider>
  </Provider>
)

Having both providers can be done through the main provider like so:

<ReactReduxFirebaseProvider
  firebase={firebase}
  config={rrfConfig}
  dispatch={store.dispatch}
  createFirestoreInstance={createFirestoreInstance}>
    <Home />
</ReactReduxFirebaseProvider>

Equivalent to:

<ReactReduxFirebaseProvider firebase={firebase} config={fbConfig} dispatch={store.dispatch}>
    <ReduxFirestoreProvider
        firebase={firebase}
        config={fbConfig}
        dispatch={store.dispatch}
        createFirestoreInstance={createFirestoreInstance}>
        <Home />
    </ReduxFirestoreProvider>
</ReactReduxFirebaseProvider>

That said, what are thoughts on the names (everyone feel free to answer)? I was going to do FirebaseProvider or ReduxFirebaseProvider, but went with the long name for clarity. Not as sold on the long name now that I see the example code, but maybe that is just me.

Still haven't released it to npm, but now that all of the HOCs use this new pattern on my branch I am planning on getting it published into an alpha version. Don't want to speak too soon, but hopefully to be released sometime this week.

[prescottprue]

Released v3.0.0-alpha to the next tag (it can be installed with npm i --save react-redux-firebase@next). Also published the v3.0.0 section of the docs which explains how to install and includes a migration guide.

It is all still young, so be sure to reach out if things don't work as expected or if you have any input on a more clear API. I want to get things ironed out in the pre-release versions as soon as possible.

Thanks to to all for reporting!

[salmazov]

Please correct the docs

[prescottprue]

@salmazov Fixed. Thanks for reaching out. Feel free to open a new issue if anything is not working as you expect or if you find other typos in the docs.

[salmazov]

@prescottprue Okey! Thanks!

[sanbeaman]

It took me a little while to figure out how to use firestore profile instead of RTDB, you mentioned how to do it in the Readme for v3 but not the migration guide:
react-redux-firebase config

const rrfConfig = {
  userProfile: 'users',
 useFirestoreForProfile: true // Firestore for Profile instead of Realtime DB
}

[prescottprue]

@sanbeaman Thanks for mentioning, I'll be sure to add it in there.

[PeterPil]

I can't import ReactReduxFirebaseProvider from react-redux-firebase. There is no file such like this

[prescottprue]

@PeterPil That would most likely be because you are using an incorrect version. Make sure to follow the v2 to v3 migration guide. If things still aren't working as expected, please feel free to open a new issue with code that replicates the unexpected behavior.

[QQ031004]

Hi.
I am a beginner of react App.
I got problem
Error:
Context from react-redux not found. If you are using react-redux v6 a v3.. version of react-redux-firebase is required. Please checkout the v3 migration guide: http://bit.ly/2SRNdiO
And I tried install react-redux-firebase v3 but i got just V2.2.8. Why?

[QQ031004]

By the way, iI followed: v2 to v3 migration guide.

[prescottprue]

@QQ031004 it is available through the next tag, but you are installing latest. You should install by calling npm i --save react-redux-firebase@next

[QQ031004]

Thank you above: npm i --save react-redux-firebase@next
That works well!

[QQ031004]

Could someone please tells me what problem is below?
I tried find out solution but, I just couldn't understand what is wrong? I did write as the video shown...

TypeError: Object(...) is not a function
Module../src/index.js
src/index.js:20
17 | const store = createStore(
18 | rootReducer,
19 | compose(

20 | applyMiddleware(thunk.withExtraArgument({ getFirebase, getFirestore })),
21 | reduxFirestore(fbConfig),
22 | reactReduxFirebase(fbConfig)
23 | //{
View compiled
__webpack_require__
/Users/qiuqiongzhou/Documents/AppProject/testapp/webpack/bootstrap:781
778 | };
779 |
780 | // Execute the module function
781 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
| ^ 782 |
783 | // Flag the module as loaded
784 | module.l = true;``

[prescottprue]

@QQ031004 It looks like you are still including the store enhancer (reactReduxFirebase), which is not part of the v3 API. As noted in the migration guide that should be removed.

[AlexChaseJones]

Hey fellas,, having some trouble integrating with V3. I'm able to do all the above and connect to a firestore instance and fetch data using compose and firestoreConnect, but I don't have any of the methods for adding/updating/setting methods that i believe used to come with {reduxFirestore} from redux-firestoreCan't seem to figure this out either using the docs... any hints?

[prescottprue]

@AlexChaseJones reduxFirestore is the store enhancer from the old API of redux-firestore - as mentioned in the migration guide, the store enhancer should be removed since the old context API is no longer being used (in favor of the new API). The HOCs which come from react-redux-firebase like firestoreConnect used to pull from this.context.store.firestore (added by the enhacer), but they now pull from the new context (from the Provider)

[dmcshehan]

I'm getting the following error:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

I want to use firestore and trying to configure the react-redux-firebase before configuring redux-firestore. I have followed the docs and below is my code. Can someone help with this?

import React from "react";
import "./App.css";

//firebase
import firebase from "firebase/app";

//redux
import { Provider } from "react-redux";
import { createStore, combineReducers } from "redux";
import {
  ReactReduxFirebaseProvider,
  firebaseReducer
} from "react-redux-firebase";

const fbConfig = {
  //my fbconfig object
};

const rrfConfig = { userProfile: "users" };

firebase.initializeApp(fbConfig);

const rootReducer = combineReducers({
  firebase: firebaseReducer
});

const initialState = {};

const store = createStore(rootReducer, initialState);

const rrfProps = {
  firebase,
  config: rrfConfig,
  dispatch: store.dispatch
};

function App() {
  return (
    <Provider store={store}>
      <ReactReduxFirebaseProvider {...rrfProps}>
        <h1>Hello</h1>
      </ReactReduxFirebaseProvider>
    </Provider>
  );
}

export default App;

[prescottprue]

@dmcshehan can you please open a new issue with a full codebase where the issue can be reproduced? It is hard to tell what may be wrong from just the one snippet.