react-redux-firebase Firestore没有加载数据。

Question

我有一个react-native应用，使用react-redux-firebase，react-native-firebase连接到firestore来返回一些todo记录。 商店里有记录，但是所有显示的都是 "加载 "文本。 它从来没有更新todos。

我试过直接在应用程序中连接，它工作得很好，所以我假设firebase的配置是正确的。

  this.ref.get().then((querySnapshot) =>  {
            console.log("ListItemFS: started query snapshot", querySnapshot);
            this.handleSnapshot(querySnapshot);
        });

这是我的App.tsx

import React from 'react'
import { Provider } from 'react-redux'
import { ReactReduxFirebaseProvider } from 'react-redux-firebase';
import firebase from 'react-native-firebase'
import { createStore, compose } from 'redux'
import { composeWithDevTools } from "redux-devtools-extension";
import { createFirestoreInstance, firestoreReducer } from 'redux-firestore' 
import { combineReducers } from 'redux';
import { firebaseStateReducer  } from 'react-redux-firebase'
import Todos from './Todos';


//Configure firebase
const fbConfig = {
  userProfile: 'users',
 useFirestoreForProfile: true, // Firestore for Profile instead of Realtime DB,
 enableLogging: true
}
//firebase.initializeApp(fbConfig) // <- I have tried with and without this with no difference.
//let db = firebase.firestore(); makes no difference

//Configure reducers
const rootReducer = combineReducers({
  firebase:firebaseStateReducer, 
  firestore: firestoreReducer
})

// Configure store
const store = createStore(rootReducer, compose(composeWithDevTools())) 


export default () => (
  <Provider store={store}>
    <ReactReduxFirebaseProvider
      firebase={firebase}
      config={fbConfig}
      dispatch={store.dispatch}
      createFirestoreInstance={createFirestoreInstance}
      >
      <Todos />
    </ReactReduxFirebaseProvider>
  </Provider>
)

这是我的TODO组件

import React from 'react'
import { connect } from 'react-redux'
import { compose } from 'redux'
import { isLoaded, isEmpty } from 'react-redux-firebase/lib/helpers'
import { View ,Text} from 'react-native'
import { firestoreConnect } from 'react-redux-firebase'

function Todos({ todos, firebase, state }) {
  console.log("ToDos",todos);
  console.log("state",state);

  if (!isLoaded(todos)) {
    return <Text>Loading...</Text>
  }
  if (isEmpty(todos)) {
    return <Text>Todos List Is Empty</Text>
  }
  return (
    <View>
        {
          Object.keys(todos).map(
            (key, id) => (
              <Text >First Key:{todos[key]}</Text>
            )
          )
        }
    </View>
  )
}

export default compose(
  firestoreConnect(() => [
    { collection: 'todos' } //'todos' // { path: '/todos' } // neither works
  ]),
  connect(state => ({
    todos: state.firestore.data.todos
    // profile: state.firebase.profile // load profile
  }))
)(Todos)

以下是我的依赖关系

 "dependencies": {
    "expo": "^34.0.1",
    "fbjs": "^1.0.0",
    "react": "16.8.3",
    "react-dom": "16.8.3",
    "react-native": "0.59.10",
    "react-native-firebase": "5.2.0",
    "react-native-gesture-handler": "~1.3.0",
    "react-native-reanimated": "~1.1.0",
    "react-native-router-flux": "^4.1.0-beta.8",
    "react-native-screens": "1.0.0-alpha.22",
    "react-native-size-matters": "^0.2.1",
    "react-native-unimodules": "~0.5.2",
    "react-native-web": "^0.11.4",
    "react-navigation-deprecated-tab-navigator": "^1.3.0",
    "react-redux": "^5.0.6",
    "react-redux-firebase": "^3.0.0-beta.2",
    "recompose": "^0.30.0",
    "redux": "3.x.x",
    "redux-devtools-extension": "^2.13.8",
    "redux-firestore": "^0.8.0"
  }

如果你有什么建议，我做错了什么，我将非常感激。

Answer 1

尝试添加

import 'react-native-firebase/firestore'

在你 App.tsx