feat(HOCs): support running in react strict/concurrent mode

[michaelspeed]

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

With react 16.7 alpha 0, enabling concurrent mode gives me this error -

`Warning: Unsafe lifecycle methods were found within a strict-mode tree:

componentWillMount: Please update the following components to use componentDidMount instead: FirebaseConnect(Connect(Core))

componentWillReceiveProps: Please update the following components to use static getDerivedStateFromProps instead: Connect(Core), FirebaseConnect(Connect(Core)), Provider

componentWillUpdate: Please update the following components to use componentDidUpdate instead: Connect(Core)`

[prescottprue]

@michaelspeed Thanks for reaching out with the warnings. There has been discussion of switching the HOCs to use componentDidMount for a while now (I believe the reasoning before was SSR). Initially I didn't do this since I wasn't sure if it was a breaking change or not, but through initial investigation, it doesn't seem to be.

Either way, I'll look into make a PR for the change.

[michaelspeed]

but still the last warning is of {Connect} from react-redux package. i am not sure they are also planning to move to componentDidMount()

[prescottprue]

That is correct, though I am assuming that they will.

[prescottprue]

Have started working on this in the v3.0.0-alpha branch, but there are some other changes I'm going to include before releasing.

[prescottprue]

Released v3.0.0-alpha, which has these changes, 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.

[michaelspeed]

thanks going to try this now

[michaelspeed]

no exported member 'ReactReduxFirebaseProvider'
with type script? index.d.ts not updated?

[prescottprue]

@michaelspeed Yeah, the context's themselves were exported, so you can do ReactReduxFirebaseContext.Provider, but I also am planning on a releasing a change with the providers exported. Thanks for reaching out.

[cvanem]

@prescottprue I tried v3.0.0-alpha.4 and am still getting the below error. Any idea how to fix this?

I am importing like this:

import { ReactReduxFirebaseProvider, ReactReduxFirebaseContext } from 'react-redux-firebase';

Error:

[prescottprue]

@cvanem I haven't yet released v3.0.0-alpha.4? Did you point to the branch itself?

Let me try publishing v3.0.0-alpha.4 which the typings change.

[cvanem]

@prescottprue Yeah, I am working on the branch itself with yarn. I was able to get around the above error by doing the following:

var RRFirebaseProvider = compose()(ReactReduxFirebaseProvider) as React.ComponentType;

Then use as:

<RRFirebaseProvider {...rrfProps}>...</RRFirebaseProvider>

But I am still having problems getting it to work. I am debugging it now to try and figure out what is going on, but let me know if you have any ideas.

[prescottprue]

@cvanem I made some changes and published v3.0.0-alpha.4 to npm. Can you give it a shot now and see if it works as expected?

[cvanem]

@prescottprue Thanks, fixed the typescript error. Firebase is showing up in the redux store, but firebase.auth.isLoaded always equals false and I can't get authIsReady to fire. It may be something configured incorrectly on my end.

This is how my reducer is configured, which I believe is correct:

firebase.initializeApp(firebaseConfig);
firebase.auth();

...

function buildRootReducer(allReducers, history) {
    return combineReducers<ApplicationState>(Object.assign({}, allReducers, { router: connectRouter(history) }));
}

Also, are we still still suppose to use withFirebase to access the context or is there a better way now?

[cvanem]

@prescottprue It looks like I needed to add the initializeAuth property. I removed firebase.auth() and used initializeAuth instead. This is what worked:

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

[prescottprue]

@cvanem You shouldn't have to pass the initializeAuth prop yourself - seems like it was a misspelling in the default prop, so I am going to release a fix for that.

As for getting from context - Yes, withFirebase and firebaseConnect are both still good ways to get the wrapped Firebase instance. It is also available as a render prop if you use ReactReduxFirebaseContext.Consumer like so:

<ReactReduxFirebaseContext.Consumer>
  {firebase => (
     <SomeProp firebase={firebase} dispatch={firebase.dispatch} />
  )}
</ReactReduxFirebaseContext.Consumer>

Because of the option for above, I may end up exposing ReactReduxFirebaseContext.Consumer directly in the future

[cvanem]

@prescottprue Ok, good to know. I tested v3.0.0 alpha.5 and everything is working as expected (without manually setting initializeAuth). Thanks.