0

我按照 v2.0.0 > Read Me > Load Data 下文档中的示例进行操作（在挂载/卸载时自动管理侦听器）（无法直接链接）。并将示例 1中的连接调用替换为此处显示的特定于 firestore 的调用]( http://react-redux-firebase.com/docs/firestore.html#examples )。

我将 Todo 示例完全复制到为测试目的而创建的新组件中。

待办事项组件：

import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import { compose } from 'redux'
import { firebaseConnect,firestoreConnect, isLoaded, isEmpty } from 'react-redux-firebase'

const Todos = ({ todos, firebase }) => {
  // Build Todos list if todos exist and are loaded
  const todosList = !isLoaded(todos)
    ? 'Loading'
    : isEmpty(todos)
      ? 'Todo list is empty'
      : Object.keys(todos).map(
          (key, id) => (
            <TodoItem key={key} id={id} todo={todos[key]}/>
          )
        )
  return (
    <div>
      <h1>Todos</h1>
      <ul>
        {todosList}
      </ul>
      <input type="text" ref="newTodo" />
      <button onClick={this.handleAdd}>
        Add
      </button>
    </div>
  )
}

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





export default compose(
 firestoreConnect(['todos']), // or { collection: 'todos' }
 connect((state, props) => ({
   todos: state.firestore.ordered.todos
 }))
)(Todos)

商店配置的配置如docs中所示。商店配置已适应插入到由react-boilerplate.

/**
 * Create the store with dynamic reducers
 */

import { createStore, applyMiddleware, compose } from 'redux'
import { fromJS } from 'immutable'
import { routerMiddleware } from 'connected-react-router/immutable'
import createSagaMiddleware from 'redux-saga'
import { reactReduxFirebase, firebaseReducer } from 'react-redux-firebase'
import { reduxFirestore, firestoreReducer } from 'redux-firestore'
import firebase from 'firebase/app' 
import 'firebase/auth'
import 'firebase/database'
import 'firebase/firestore'

import createReducer from './reducers'

const sagaMiddleware = createSagaMiddleware()
const firebaseConfig = {
  apiKey: process.env.FIREBASE_API_KEY,
  authDomain: process.env.AUTH_DOMAIN,
  databaseURL: process.env.DATABASE_URL,
  projectId: process.env.PROJECT_ID,
  storageBucket: process.env.STORAGE_BUCKET,
  messagingSenderId: process.env.MESSAGING_SENDER_ID,
}
const rrfConfig = {
  userProfile: 'users',
  // useFirestoreForProfile: true, // Firestore for Profile instead of Realtime DB
  // attachAuthIsReady: true
}

// Initialize Cloud Firestore through Firebase
export default function configureStore(initialState = {}, history) {
  firebase.initializeApp(firebaseConfig)

  // Initialize Firestore with timeshot settings
  firebase.firestore()
  // firebase.firestore().settings({ timestampsInSnapshots: true })

  // Create the store with two middlewares
  // 1. sagaMiddleware: Makes redux-sagas work
  // 2. routerMiddleware: Syncs the location/URL path to the state
  const middlewares = [sagaMiddleware, routerMiddleware(history)]

  const enhancers = [
    applyMiddleware(...middlewares),
    // reactReduxFirebase(config), // enhancing our store with these packages
    // reduxFirestore(config)
  ]

  // If Redux DevTools Extension is installed use it, otherwise use Redux compose
  /* eslint-disable no-underscore-dangle, indent */
  const composeEnhancers =
    process.env.NODE_ENV !== 'production' &&
    typeof window === 'object' &&
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
      ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({})
      : compose
  /* eslint-enable */
  const createStoreWithFirebase = compose(
    reactReduxFirebase(firebase, rrfConfig), // firebase instance as first argument
    reduxFirestore(firebase),
  )(createStore)

  const store = createStoreWithFirebase(
    createReducer(),
    fromJS(initialState),

    composeEnhancers(...enhancers),
  )

  // Extensions
  store.runSaga = sagaMiddleware.run
  store.injectedReducers = {} // Reducer registry
  store.injectedSagas = {} // Saga registry

  // Make reducers hot reloadable, see http://mxs.is/googmo
  /* istanbul ignore next */
  if (module.hot) {
    module.hot.accept('./reducers', () => {
      store.replaceReducer(createReducer(store.injectedReducers))
    })
  }

  return store
}

我准确地跟踪并验证了我的商店配置，以确保文档中的所有步骤都在我的配置中正确配置。

我createReducer的功能在一个单独的文件中，您可以看到我正确添加了firebaseReducerand firebaseReducer。



import { combineReducers } from 'redux-immutable'
import { connectRouter } from 'connected-react-router/immutable'
import { firebaseReducer } from 'react-redux-firebase'
import { firestoreReducer } from 'redux-firestore'
import history from 'utils/history'
import languageProviderReducer from 'containers/LanguageProvider/reducer'

export default function createReducer(injectedReducers = {}) {
  const rootReducer = combineReducers({
    firebase: firebaseReducer,
    firestore: firestoreReducer,

    language: languageProviderReducer,
    ...injectedReducers,
  })

  // Wrap the root reducer and return a new root reducer with router state
  const mergeWithRouterState = connectRouter(history)
  return mergeWithRouterState(rootReducer)
}

我的 redux 存储包含firestoreandfirebase并且它被注入到组件道具中。不起作用的是使用 connectFirestore HoC 自动检索文档列表并将其注入到组件中。

这是错误消息：

react-dom.development.js?61bb:20266 Uncaught TypeError: Cannot read property 'ordered' of undefined
    at Function.eval [as mapToProps] (index.js?d834:49)
    at mapToPropsProxy (wrapMapToProps.js?1817:54)
    at Function.detectFactoryAndVerify (wrapMapToProps.js?1817:63)
    at mapToPropsProxy (wrapMapToProps.js?1817:54)
    at handleFirstCall (selectorFactory.js?805c:37)
    at pureFinalPropsSelector (selectorFactory.js?805c:85)
    at Object.runComponentSelector [as run] (connectAdvanced.js?48b8:43)
    at Connect.initSelector (connectAdvanced.js?48b8:195)
    at new Connect (connectAdvanced.js?48b8:136)
    at constructClassInstance (react-dom.development.js?61bb:11315)

（摘自我的代码，即文档中的示例 1 ）：

export default compose(
 firestoreConnect(['todos']), // or { collection: 'todos' }
 connect((state, props) => ({
   todos: state.firestore.ordered.todos
 }))
)(Todos)

我检查了state变量，它确实包含该firestore属性。该属性包含许多功能，正如预期的那样，但它缺少“有序”下的查询结果，这是未定义的。

我尝试了所有不同的使用方式，firestoreconnect例如使用基于类的组件、使用带参数的查询等，并且都给出了相同的错误。

我的 Firebase 项目配置正确，因为我能够在集合中创建文档。还存在一个todos用于测试目的的集合，其中包含 2 个文档。

我遇到过这篇文章，其中提到了以下内容：

如果你刚刚升级到 React-Redux v6，那是因为 react-redux-firebase 不兼容 v6。

有关详细信息，请参阅https://github.com/prescottprue/react-redux-firebase/issues/581。

这不适用于我，因为我使用的是react-redux版本 5。以下是我使用的版本：

    "firebase": "^5.10.1",
    "react-redux": "^5.0.7",
    "react-redux-firebase": "^2.2.6",
    "redux": "^4.0.1",
    "redux-firestore": "^0.7.3",

我在这方面花费了大量时间。就像我说的，使用firestore向集合添加新数据效果很好。无论我如何处理解决方案，都只是这个 HoC 业务失败了。任何帮助，将不胜感激。

4

1 回答 1

1

从来没有解决这个问题。我猜这与不兼容的版本有关。我最终做的是下载 v4 的 react-boilerplate 并设置 v3 react-redux-firebase，它使用 Context API 而不是存储增强器。现在效果很好。

于 2019-05-02T01:30:23.467 回答