useFirestoreConnect 在反应 redux firebase 中返回空对象答案

【问题标题】：useFirestoreConnect returns empty object in react redux firebaseuseFirestoreConnect 在反应 redux firebase 中返回空对象
【发布时间】：2022-08-04 02:45:03
【问题描述】：

我正在尝试使用 react redux firebase 创建一个待办事项应用程序。我已经能够将 react redux firebase 库连接到 firebase，因为我的创建任务操作会在 firestore 中产生更改。但是 redux 商店似乎没有连接到 firestore，这就是为什么我在 useSelector 挂钩中使用 fireStoreConnect 时在 console.log 中收到一个空对象的原因。

store.js

import firebase from \'firebase/compat/app\';
import \'firebase/compat/auth\';
import \'firebase/compat/firestore\';

// Redux
import { applyMiddleware, legacy_createStore as createStore } from \'redux\';
import thunk from \'redux-thunk\';
import { getFirebase } from \'react-redux-firebase\';
import { getFirestore } from \'redux-firestore\';
import { createFirestoreInstance } from \'redux-firestore\';

// Reducers
import rootReducer from \'./reducers/rootReducer\';

// Your web app\'s Firebase configuration
const firebaseConfig = {
  apiKey: \'AIzaSyDOka0NyhrtvdX3hQihX0yVgHQ3m9f6Alg\',
  authDomain: \'todo-list-720.firebaseapp.com\',
  projectId: \'todo-list-720\',
  storageBucket: \'todo-list-720.appspot.com\',
  messagingSenderId: \'770009943120\',
  appId: \'1:770009943120:web:02fbc5adb060ee2cbc9555\',
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

// Initialize Firestore
firebase.firestore();

const rrfConfig = {
  userProfile: \'users\',
  useFirestoreForProfile: true,
};

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

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

export { store, rrfProps };

主页.js

import { useSelector } from \'react-redux\';
import { useFirestoreConnect } from \'react-redux-firebase\';

// Components
import Navigation from \'../components/Navigation\';
import TaskList from \'../components/TaskList\';
import AddTask from \'../components/AddTask\';

const Home = () => {
  useFirestoreConnect([\'tasks\']);

  const tasks = useSelector((state) => {
    console.log(state.firestore);
    return state.firestore.data.tasks;
  });

  return (
    <>
      <Navigation />
      <AddTask />
      <TaskList tasks={tasks} />
    </>
  );
};

export default Home;

rootReducer.js

import { firebaseReducer } from \'react-redux-firebase\';
import { firestoreReducer } from \'redux-firestore\';

const rootReducer = combineReducers({
  firebase: firebaseReducer,
  firestore: firestoreReducer,
  /* auth: authReducer, */
  tasks: tasksReducer,
});

image of firestore collection

CodeSandbox Link

标签： react-redux-firebase

【解决方案1】：

我不知道你是谁！但是你救了我！！！！我花了 1 天的时间试图从该死的 FIRESTORE 中获得一个完整的对象。我不知道为什么在 Firestore 的文档上没有说函数是 USEFIRESTORECONNECT()，insteD FIRESTORECONNECT()！！！！多谢！！！！！

【讨论】：

请不要添加谢谢作为答案。它们实际上并没有提供问题的答案，并且可能被未来的访问者视为噪音。一旦你earn足够reputation，你将获得upvote answers你喜欢的特权。这样，问题的未来访问者将看到对该答案的更高投票数，并且回答者也将获得声誉积分奖励。见Why is voting important。