use Firestore for storing profile data with "react-redux-firebase"?

Question

I want to use firestore to store the profile data using "react-redux-firebase". My expected output of firebase.profile looks like this in the console Expected output of the console but my output is

profile: {isEmpty: true, isLoaded: false}

this is my index.js file

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import { createStore, applyMiddleware, compose } from "redux";
import rootReducer from "./store/reducres/rooReducers";

import { Provider, useSelector } from "react-redux";
import thunk from "redux-thunk";
import {
  reduxFirestore,
  getFirestore,
  createFirestoreInstance
} from "redux-firestore";
import { ReactReduxFirebaseProvider, getFirebase, isLoaded} from "react-redux-firebase";
import fbConfig from "./config/fbConfig";
import firebase from "firebase/app";


const store = createStore(
  rootReducer,
  compose(
    applyMiddleware(thunk.withExtraArgument({ getFirestore, getFirebase })),
    reduxFirestore(firebase, fbConfig)
  )
);

const profileSpecificProps = {
  userProfile: 'users',
  useFirestoreForProfile: true,
  enableRedirectHandling: false,
  resetBeforeLogin: false
}


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

function AuthIsLoaded({ children }) {
  const auth = useSelector(state => state.firebase.auth)
  if (!isLoaded(auth)) return <div className="center"> <p>Loading Mario Plan...</p></div>;
      return children
}


ReactDOM.render(
  <Provider store={store}>
    <ReactReduxFirebaseProvider {...rrfProps}>
      <AuthIsLoaded>
      <App />
      </AuthIsLoaded>
      
    </ReactReduxFirebaseProvider>
  </Provider>,
  document.getElementById("root")
);

serviceWorker.unregister();

the full preview of the project link full project link any ideas what's going wrong?

I'm pretty sure that RRF will not create the new profile record for you. It will query it and it will update it, but it won't create it. If a userProfile record entry doesn't exist, you won't see any additional info in firebase.profile. You need to create the record for users. RRF can *update* an existing profile record; see http://react-redux-firebase.com/docs/recipes/profile.html#update-profile. — Greg Fenton, Jul 09 '20 at 19:20
Note: the ID of the document in the userProfile collection must match the UID of the user you are authenticating as. For example if in Firebase Console >> Authentication your user has UID is X0001234, and if you set `userProfile: "my_users"`, then RRF will retrieve document `my_users/X0001234` to update the Redux node: firebase.profile — Greg Fenton, Jul 09 '20 at 23:19
@mobiGeek I don't want to create the new file record. Actually I just wanted to replicate this code from youtube https://www.youtube.com/watch?v=ykSYDRHheNI&list=PL4cUxeGkcC9iWstfXntcj8f-dFZ4UtlN3&index=29 but the method ninja uses I quite outdated... and reading the comments doesn't helped either. I just want to replicate that code — harsh, Jul 10 '20 at 05:57
You do want to create a new record. In fact, your code is already attempting to do it in your authActions >> signup() right after `.createUserWithEmailAndPassword()` in the `then()` clause. But for some reason, you are getting errors when the call to createUserWithEmailAndPassword() is happening. Try signing up a new user and check out the console for error messages. — Greg Fenton, Jul 10 '20 at 16:48
Yeah, I looked in it and fortunately, I found the error. Thanks for the help @mobiGeek — harsh, Jul 11 '20 at 10:54

score 2 · Answer 1 · answered Jul 14 '20 at 10:50

I think we are following the same tutorial.

The only thing that I think you missed is the fbConfig in the rrrfProps.

This worked fine for me :


import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { createStore, applyMiddleware, compose } from 'redux';
import rootReducers from './store/reducers/rootReducer';
import { Provider, useSelector } from 'react-redux';
import thunk from 'redux-thunk';
import { getFirebase, reactReduxFirebase, ReactReduxFirebaseProvider, isLoaded } from 'react-redux-firebase';
import { getFirestore, reduxFirestore, createFirestoreInstance } from 'redux-firestore';
import fbConfig from './config/fbConfig';
import firebase from 'firebase/app'

const store = createStore(rootReducers, 
  compose(
  applyMiddleware(thunk.withExtraArgument({getFirebase, getFirestore})),
    reduxFirestore(firebase, fbConfig)
  )
)
const rrfConfig = {
  userProfile: 'users',
  useFirestoreForProfile: true
}
const rrfProps = {
  firebase,
  config: rrfConfig, fbConfig,
  dispatch: store.dispatch,
  createFirestoreInstance,
}

const AuthIsLoaded = ({children}) => {
  const auth = useSelector(state => state.firebase.auth)
  if(!isLoaded(auth)) return <div className="center">Loading...</div>
  return children
}

ReactDOM.render(
  <React.StrictMode>
    <Provider store = {store}>
      <ReactReduxFirebaseProvider {...rrfProps}>
        <AuthIsLoaded>
          <App />
        </AuthIsLoaded>
      </ReactReduxFirebaseProvider>
      </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

serviceWorker.unregister();

score 1 · Answer 2 · answered Sep 16 '20 at 15:59

I also did this tutorial and this is the working index I came out with. There are areas where the tutorial is out-of-date, but I followed the YT comments and got the project working. Of note, mine also includes Redux DevTool extension, which is a nice problem solving tool!

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import "bootstrap/dist/css/bootstrap.css";
import * as serviceWorker from "./serviceWorker";
import { createStore, compose, applyMiddleware } from "redux";
import rootReducer from "./store/reducers/index";

import { Provider } from "react-redux";
import ReduxThunk from "redux-thunk";
import {
  reduxFirestore,
  getFirestore,
  createFirestoreInstance,
} from "redux-firestore";
import { ReactReduxFirebaseProvider, getFirebase } from "react-redux-firebase";
import firebaseConfig from "./config/firebase";
import firebase from "firebase/app";

const store = createStore(
  rootReducer,
  compose(
    applyMiddleware(
      ReduxThunk.withExtraArgument({ getFirestore, getFirebase })
    ),
    reduxFirestore(firebase, firebaseConfig),
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
  )
);

const profileSpecificProps = {
  userProfile: "users",
  useFirestoreForProfile: true,
  enableRedirectHandling: false,
  resetBeforeLogin: false,
};

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

ReactDOM.render(
  <Provider store={store}>
    <ReactReduxFirebaseProvider {...rrfProps}>
      <App />
    </ReactReduxFirebaseProvider>
  </Provider>,
  document.getElementById("root")
);

serviceWorker.unregister();

score 0 · Answer 3 · answered Jul 20 '20 at 23:40

0

Your profile specific props config should look like this:

const profileSpecificProps = {
  userProfile: 'users',
  useFirestoreForProfile: true,
  updateProfileOnLogin: false,
};

answered Jul 20 '20 at 23:40

MsizaCodes

41
1

use Firestore for storing profile data with "react-redux-firebase"?

3 Answers3