React Redux Firebase：FirebaseConnect 上的错误 - 无法读取未定义的属性'ordered'

Question

我遵循了v2.0.0 下文档中的示例>自述>加载数据(在装载/卸载时自动管理的侦听器)(无法直接链接)。 并将连接调用替换为此处所示的 firestore 特定调用](http://react-redux-firebase.com/docs/firestore.html#examples) 在示例 1 中。

我将 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)

存储配置已按照文档中的此处所示进行配置。存储配置已调整为插入由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功能在一个单独的文件中，您可以看到我正确添加了firebaseReducer和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 存储包含firestore和firebase，它被注入到组件道具中。 不起作用的是使用 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业务失败了。 任何帮助将不胜感激。

Answer 1

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