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

Question

我正在转移到 react-redux-firebase 3.x 我正在学习本教程的反应。 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:

• [必需] props.config:objectreact-redux-firebase 配置
• [required] props.dispatch: Function Redux 的 dispatch 函数
• [必需] props.firebase：object Firebase 库
• [可选] props.initializeAuth:boolean是否初始化auth
• [可选] props.createFirestoreInstance: Function 创建扩展firestore实例的函数

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

我不知道这个火力基地是从哪里来的。 fffConfig 是常见的 firebase-config 吗？

在您链接到的演示应用程序中，fbConfig（firebase 配置）在文件./config/fbConfig.js 中定义，但未导出。 rrfConfig（react redux firebase 配置）是他们作为第二个参数传递给reactReduxFirebase 在index.js 中的对象。 firebase 实例在 ./config/fbConfig.js 文件的末尾初始化。命名具有误导性，因为 index.js 中的变量 fbConfig 实际上是 store 而不是配置对象。但是你设置的道具被命名为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