0

我redux-thunk用作中间件并尝试连接到redux-firestore. 当我运行应用程序时，我收到错误“TypeError: Object(...) is not a function” at createStore.

import reportWebVitals from './reportWebVitals';
import {createStore,applyMiddleware,compose} from 'redux';
import rootReducer from './store/reducers/rootReducer';
import {Provider} from 'react-redux';
import thunk from 'redux-thunk'
import {reduxFirestore, getFirestore} from 'redux-firestore'
import {reactReduxFirebase, getFirebase} from 'react-redux-firebase'
import FBConfig from './Config/FBConfig'

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

我在我的 thunk 操作中使用了额外的参数，如下所示：

export const createProject=(project)=>{
      return(dispatch,getState,{getFirebase,getFirestore})=>{
            //asyn call to database
            const firestore=getFirestore();
            firestore.collection('projects').add({
                  ...project,
                  authorFirstName:'Nam',
                  authorLastName:'Pam',
                  authorId:123,
                  createAt: new Date()
            }).then(()=>{
                  dispatch({type:'CREATE_PROJECT',project});
                  
            }).catch((err)=>{
                  dispatch({type:'CREATE_PROJECT_ERROR',err})
            })  
      }
};
4

1 回答 1

1

您看到的错误可能是由于react-redux-firebase 从 v2 升级到 v3（或基于过时示例的新代码）。此更新引入了一些重大更改，例如删除了reactReduxFirebase商店增强功能。该包现在使用 React 上下文并引入了一些新的钩子，例如useFirebase和useFirestore允许您通过函数组件中的上下文访问 firebase。但这对你的重击没有帮助。

在Redux Thunk Integration页面中，他们建议将getFirebase函数传递给withExtraArgument.

thunk.withExtraArgument(getFirebase)

至于访问 firestore，这个 GitHub 讨论建议通过getFirebase函数访问它。

getFirebase().firestore()

您希望您的额外参数是一个具有属性getFirebase和getFirestore. 我们将getFirebase其用作一个属性并为该属性创建一个内联箭头函数getFirestore。

import {createStore,applyMiddleware, AnyAction} from 'redux';
import thunk from 'redux-thunk';
import {getFirebase} from 'react-redux-firebase';

const store = createStore(
  rootReducer,
  applyMiddleware(
    thunk.withExtraArgument({
      getFirebase,
      getFirestore: () => getFirebase().firestore(),
    })
  )
);
于 2021-03-08T21:10:23.640 回答