reactjs - 将 firebase 作为参数添加到 thunk 时,Object(...) 不是函数
问题描述
用 redux 配置 firebase 对我来说很痛苦。
我不知道怎么了,但我觉得很卡。我正在尝试传递getFirebase
并getFirestore
作为参数,thunk
但我遇到了这个错误:
在尝试将额外的参数添加到 thunk 之前,我让它工作了。我正在使用下面的代码:
import { createStore, applyMiddleware, compose } from 'redux'
import thunk from 'redux-thunk'
import { composeWithDevTools } from 'redux-devtools-extension'
import rootReducer from './modules'
import {reduxFirestore, getFirestore} from 'redux-firestore'
import {reactReduxFirebase, getFirebase} from 'react-redux-firebase'
import fbConfig from './firebase/config'
export function initializeStore(initialState) {
const _thunk = thunk.withExtraArgument({ getFirebase, getFirestore })
const middlewareEnhancer = applyMiddleware(_thunk)
const composedEnhancers = compose(
middlewareEnhancer,
reduxFirestore(fbConfig),
reactReduxFirebase(fbConfig)
)
const store = createStore(rootReducer, initialState, composedEnhancers)
return store
}
你知道会发生什么吗?我很绝望。
太感谢了。
解决方案
如果你提到'redux-firestore'和'react-redux-firebase'的版本会很棒。
最近有一个 react-redux v6 迁移: http ://react-redux-firebase.com/docs/v3-migration-guide.html
您可能需要在代码中进行的更改:
- import { reactReduxFirebase, getFirebase } from 'react-redux-firebase'
+ import { ReactReduxFirebaseProvider, getFirebase } from 'react-redux-firebase'
- import { reduxFirestore, getFirestore } from 'redux-firestore'
+ import { createFirestoreInstance, reduxFirestore, getFirestore } from 'redux-firestore'
+ import firebase from "firebase/app";
当你有 react-redux-firebase 的最新版本时使用它,因为 reactReduxFirebase 的 API 已删除。还要改变composedEnhancers如下:
- const composedEnhancers = compose(
- middlewareEnhancer,
- reduxFirestore(fbConfig),
- reactReduxFirebase(fbConfig)
- )
+ const composedEnhancers = compose(
+ middlewareEnhancer,
+ reduxFirestore(firebase, fbConfig)
+ )
添加 react-redux-firebase 道具
+ const rrfProps = {
+ firebase,
+ config: fbConfig,
+ dispatch: store.dispatch,
+ createFirestoreInstance,
+ }
您需要为您的应用提供 react-redux-firebase 道具:
<ReactReduxFirebaseProvider {...rrfProps}>
<App />
</ReactReduxFirebaseProvider>
它应该可以正常工作。您可以按照上面给出的链接中的说明添加 rrfConfig,以防它仍然不起作用。
推荐阅读
- python - 具有分层列的 Pandas 数据透视表
- angular - 使用角度 6 中的 data-toggle ="tab" 导航时出现错误无法匹配任何路线
- python - jinja 中的 jinja2.exceptions.TemplateSyntaxError (即使我在代码中写了 {% endfor %},for 循环也没有结束)
- antlr - 有什么方法可以删除语法规则中不需要的空格?
- java - 找不到 application.xml 中定义的子模块 [xxx.jar]
- c# - EntityHistory 引用其他实体的自有类型失败
- docker - 无法从终端登录到 docker hub
- r - 模式排序及其用 R 表示
- angularjs - Angular 6 - 尝试读取八位字节流内容时的 HttpClient.get 401 错误响应
- realm - 在 Realm Studio 中执行查询计数