将异步功能重写为react-redux钩子功能组件时遇到问题

Question

我的react / redux / firestore应用程序中有几种形式，并且以前能够使用可重用的异步组件来处理将数据推送到firestore中。自从我升级了react-redux，react-redux-firebase和redux-firestore软件包以来，我的表单处理程序无法使用错误消息“未初始化Firebase”。因此，我试图用钩子重写表单处理程序，但无法弄清楚如何使用useFirestore和useDispatch来替换getFirestore和dispatch和await在不呈现任何内容的可重用功能组件中。

这是我以前的handleFormAdd组件

import {getFirestore} from 'redux-firestore'
import {history} from '../routes/AppRouter'

export const handleFormAdd = (
  {formName, formData, geoData, images = []},
  status
) => async dispatch => {
  const firestore = getFirestore()
  dispatch({
    type: 'ENQUEUE_SNACKBAR',
    notification: {
      key: new Date().getTime() + Math.random(),
      message: 'Creating...',
      options: {
        variant: 'info'
      }
    }
  })
  try {
    if (navigator.onLine === true) {
      const res = await firestore.add(
        {collection: formName},
        {...formData, images}
      )
      if (formData.longitude && formData.latitude) {
        await firestore.set({collection: 'geopoints', doc: res.id}, geoData)
      }
      dispatch({
        type: 'ENQUEUE_SNACKBAR',
        notification: {
          key: new Date().getTime() + Math.random(),
          message: 'Form created',
          options: {
            variant: 'success'
          }
        }
      })
    }
    if (navigator.onLine === false) {
      const docID = cuid()
      firestore.set({collection: formName, doc: docID}, {...formData, images})
      if (formData.longitude && formData.latitude) {
        firestore.set({collection: 'geopoints', doc: docID}, geoData)
      }
      dispatch({
        type: 'ENQUEUE_SNACKBAR',
        notification: {
          key: new Date().getTime() + Math.random(),
          message: 'Form created offline',
          options: {
            variant: 'success'
          }
        }
      })
    }
    history.goBack()
  } catch (e) {
    dispatch({
      type: 'ENQUEUE_SNACKBAR',
      notification: {
        key: new Date().getTime() + Math.random(),
        message: 'Form creation failed' + e,
        options: {
          variant: 'error'
        }
      }
    })
  }
}

这是我尝试将其转换为引发“破坏钩子规则错误”的钩子。

import { useFirestore } from 'react-redux-firebase'
import { useDispatch } from 'react-redux';
import {history} from '../routes/AppRouter'

export const handleFormAdd = ( {formName, formData, geoData, images = []}) => {
  const firestore = useFirestore()
  const dispatch = useDispatch()
  dispatch({
    type: 'ENQUEUE_SNACKBAR',
    notification: {
      key: new Date().getTime() + Math.random(),
      message: 'Creating...',
      options: {
        variant: 'info'
      }
    }
  })
  try {
    if (navigator.onLine === true) {
      const res =  firestore.add(
        {collection: formName},
        {...formData, images}
      )
      if (formData.longitude && formData.latitude) {
         firestore.set({collection: 'geopoints', doc: res.id}, geoData)
      }
      dispatch({
        type: 'ENQUEUE_SNACKBAR',
        notification: {
          key: new Date().getTime() + Math.random(),
          message: 'Form created',
          options: {
            variant: 'success'
          }
        }
      })
    }
    if (navigator.onLine === false) {
      const docID = cuid()
      firestore.set({collection: formName, doc: docID}, {...formData, images})
      if (formData.longitude && formData.latitude) {
        firestore.set({collection: 'geopoints', doc: docID}, geoData)
      }
      dispatch({
        type: 'ENQUEUE_SNACKBAR',
        notification: {
          key: new Date().getTime() + Math.random(),
          message: 'Form created offline',
          options: {
            variant: 'success'
          }
        }
      })
    }
    history.goBack()
  } catch (e) {
    dispatch({
      type: 'ENQUEUE_SNACKBAR',
      notification: {
        key: new Date().getTime() + Math.random(),
        message: 'Form creation failed' + e,
        options: {
          variant: 'error'
        }
      }
    })
  }
}

谢谢您的帮助，谢谢