使用 Firestore 通过“react-redux-firebase”存储配置文件数据？

Posted 2023-02-22

【中文标题】使用 Firestore 通过“react-redux-firebase”存储配置文件数据？

【英文标题】：use Firestore for storing profile data with "react-redux-firebase"?

【发布时间】：2020-10-30 07:25:36

【问题描述】：

我想通过“react-redux-firebase”使用 firestore 来存储配置文件数据。我预期的 firebase.profile 输出在控制台中如下所示 Expected output of the console 但我的输出是

profile: isEmpty: true, isLoaded: false
          

这是我的 index.js 文件

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

项目链接的完整预览 full project link 有什么想法吗？

【问题讨论】：

我很确定 RRF 不会为您创建新的个人资料记录。它会查询它并更新它，但不会创建它。如果 userProfile 记录条目不存在，您将不会在 firebase.profile 中看到任何其他信息。您需要为用户创建记录。 RRF 可以更新现有的个人资料记录；见react-redux-firebase.com/docs/recipes/…。

注意：userProfile 集合中文档的 ID 必须与您进行身份验证的用户的 UID 匹配。例如，如果在 Firebase 控制台 >> 身份验证中，您的用户的 UID 是 X0001234，并且如果您设置了 userProfile: "my_users"，那么 RRF 将检索文档 my_users/X0001234 以更新 Redux 节点：firebase.profile

@mobiGeek 我不想创建新的文件记录。实际上，我只是想从 youtube youtube.com/… 复制这段代码，但 ninja 使用的方法我已经过时了……阅读 cmets 也无济于事。我只想复制那个代码

您确实想创建一条新记录。事实上，您的代码已经尝试在 authActions >> signup() 中的 .createUserWithEmailAndPassword() 之后的 then() 子句中执行此操作。但是由于某种原因，当调用 createUserWithEmailAndPassword() 时，您会遇到错误。尝试注册一个新用户并查看控制台中的错误消息。

是的，我查看了它，幸运的是，我发现了错误。感谢@mobiGeek 的帮助

【参考方案1】：

我也完成了本教程，这是我得出的工作索引。有些地方的教程已经过时了，但我遵循了 YT cmets 并让项目正常工作。 值得注意的是，我的还包括 Redux DevTool 扩展，这是一个很好的问题解决工具！

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

【参考方案2】：

您的个人资料特定道具配置应如下所示：

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

【参考方案3】：

我认为我们正在遵循相同的教程。

我认为您唯一错过的是rrrfProps 中的fbConfig。

这对我来说很好用：

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