如何将react-redux-firebase 2.x迁移到react-redux-firebase 3.x

Question

我正在转换到react-redux-firebase 3.x，我正在学习本教程中的react。https://github.com/ayush221b/MarioPlan-react-redux-firebase-app

如何迁移以下代码？

index.js

const store = createStore(rootReducer, 
  compose(
  applyMiddleware(thunk.withExtraArgument({getFirebase,getFirestore})),
  reduxFirestore(fbConfig),
  reactReduxFirebase(fbConfig, {useFirestoreForProfile: true, userProfile: 'users', attachAuthIsReady: true}) 
  )
);

我找到了这份文件。https://react-redux-firebase.com/docs/v3-migration-guide.html我正在重新构建项目，同时引用。然而，我遇到了一些问题。我不知道这个火力从何而来。fffConfig是常见的firebase-config吗？

reactReduxFirebase(firebase，rrfConfig)

fbconfig.js

  // Your web app's Firebase configuration
  // For Firebase JS SDK v7.20.0 and later, measurementId is optional
  var firebaseConfig = {
    apiKey: "",
    authDomain: "",
    databaseURL: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: "1:12345:web:12345",
    measurementId: "G-6MGBT"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  firebase.firestore();

export default firebase;

https://github.com/ayush221b/MarioPlan-react-redux-firebase-app/blob/master/src/index.js

我修改的代码

const rrfConfig = {
  userProfile: 'users',
  useFirestoreForProfile: true, // Firestore for Profile instead of Realtime DB
  attachAuthIsReady: true
}

 const rrfProps = {
     fbConfig,
     config: rrfConfig,
     dispatch: store.dispatch,
     createFirestoreInstance // <- needed if using firestore
  }



ReactDOM.render(
<React.StrictMode>
  <Provider store = {store}>
        <ReactReduxFirebaseProvider {...rrfProps}>
          <App />
       </ReactReduxFirebaseProvider>
  </Provider>
</React.StrictMode>
,document.getElementById('root')

错误

TypeError: Cannot read property '_' of undefined
createFirebaseInstance
src/createFirebaseInstance.js:38
  35 | }
  36 | 
  37 | // Add internal variables to firebase instance
> 38 | const defaultInternals = {
     | ^  39 |   watchers: {},
  40 |   listeners: {},
  41 |   callbacks: {},

Answer 1

从v2升级到v3时，您需要删除两个存储增强器reduxFirestore和reactReduxFirebase。相反，您希望在Redux Provider和App之间添加一个ReactReduxFirebaseProvider组件。此提供程序组件需要certain props

Firebase required config

• required：
• required props.config：object react-redux-firebase props.dispatch：Function Redux's dispatch Redux props.firebase：object Firebase Redux props.initializeAuth：boolean是否初始化Redux props.createFirestoreInstance:用于创建扩展firestore实例的Function函数

Migration Guide将道具创建为单独的对象rrfProps，然后将它们传递给<ReactReduxFirebaseProvider {...rrfProps}>等提供程序，但您也可以直接在提供程序上设置道具。

我不知道这个火力从何而来。fffConfig是常见的firebase-config吗？

在您链接到的演示应用程序中，在文件./config/fbConfig.js中定义了fbConfig (firebase配置)，但没有将其导出。rrfConfig (react redux firebase配置)是它们作为第二个参数传递给index.js中的reactReduxFirebase的对象。firebase实例在./config/fbConfig.js文件的末尾初始化。命名有误导性，因为index.js中的变量fbConfig实际上是存储区，而不是配置对象。但是您设置的属性名为firebase，因此您的rrfProps应该是：

const rrfProps = {
  firebase: fbConfig,
...

但老实说，我会改为重命名此导入。

import firebase from './config/fbConfig'

我发现传递内联道具会更清楚。因此，我修改后的index.js文件代码是：

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import { createStore, applyMiddleware, compose } from "redux";
import rootReducer from "./store/reducers/rootReducer";
import { Provider } from "react-redux";
import thunk from "redux-thunk";
import {
  getFirebase,
  ReactReduxFirebaseProvider,
  createFirestoreInstance
} from "react-redux-firebase";
import firebase from "./config/fbConfig";

const store = createStore(
  rootReducer,
  compose(
    applyMiddleware(
      thunk.withExtraArgument({
        getFirebase,
        getFirestore: () => getFirebase().firestore()
      })
    )
  )
);

ReactDOM.render(
  <Provider store={store}>
    <ReactReduxFirebaseProvider
      firebase={firebase}
      config={{
        useFirestoreForProfile: true,
        userProfile: "users",
        attachAuthIsReady: true
      }}
      dispatch={store.dispatch}
      createFirestoreInstance={createFirestoreInstance}
    >
      <App />
    </ReactReduxFirebaseProvider>
  </Provider>,
  document.getElementById("root")
);

serviceWorker.register();

我已经解释了this answer中对thunk的更改。

希望这能起作用。我没有收到任何编译器错误，但我还没有测试整个登录/身份验证流程。

Code Sandbox Link