1
votes

utiliser Firestore pour stocker les données de profil avec "react-redux-firebase"?

Je souhaite utiliser firestore pour stocker les données de profil en utilisant "react-redux-firebase". Ma sortie attendue de firebase.profile ressemble à ceci dans la console Sortie attendue de la console mais ma sortie est

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();

ceci est mon fichier index.js

profile: {isEmpty: true, isLoaded: false}

l'aperçu complet du lien du projet lien complet du projet des idées sur ce qui ne va pas?

firebase reactjs react-redux react-redux-firebase

5 commentaires

Je suis presque sûr que RRF ne créera pas le nouvel enregistrement de profil pour vous. Il l'interrogera et le mettra à jour, mais il ne le créera pas. Si une entrée d'enregistrement userProfile n'existe pas, vous ne verrez aucune information supplémentaire dans firebase.profile. Vous devez créer l'enregistrement pour les utilisateurs. RRF peut mettre à jour un enregistrement de profil existant; voir react-redux-firebase.com/docs/recipes/… .

Remarque: l'ID du document dans la collection userProfile doit correspondre à l'UID de l'utilisateur sous lequel vous vous authentifiez. Par exemple, si dans Firebase Console >> Authentification votre utilisateur a l'UID est X0001234, et si vous définissez userProfile: "my_users" , alors RRF récupérera le document my_users / X0001234 à mettre à jour le nœud Redux: firebase.profile

@mobiGeek Je ne veux pas créer le nouvel enregistrement de fichier. En fait, je voulais juste reproduire ce code à partir de YouTube / a> mais la méthode que ninja utilise est assez obsolète ... et la lecture des commentaires n'aide pas non plus. Je veux juste répliquer ce code

Vous souhaitez créer un nouvel enregistrement. En fait, votre code tente déjà de le faire dans votre authActions >> signup () juste après .createUserWithEmailAndPassword () dans la clause then () . Mais pour une raison quelconque, vous obtenez des erreurs lorsque l'appel à createUserWithEmailAndPassword () se produit. Essayez de vous inscrire un nouvel utilisateur et consultez la console pour les messages d'erreur.

Ouais, j'ai regardé dedans et heureusement, j'ai trouvé l'erreur. Merci pour l'aide @mobiGeek

3 Réponses :

2
votes

Je pense que nous suivons le même tutoriel.

La seule chose que je pense que vous avez manquée est le fbConfig dans le rrrfProps .

Cela a bien fonctionné pour moi:

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();

0 commentaires

0
votes

La configuration des accessoires spécifiques à votre profil doit ressembler à ceci:

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

0 commentaires

1
votes

J'ai aussi fait ce tutoriel et voici l'index de travail que j'ai sorti. Il y a des domaines où le didacticiel est obsolète, mais j'ai suivi les commentaires de YT et j'ai fait fonctionner le projet. À noter, le mien inclut également l'extension Redux DevTool, qui est un bel outil de résolution de problèmes!

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();

0 commentaires