У меня есть несколько форм в моем приложении Reaction / redux / firestore, и ранее я мог использовать повторно используемый асиновый c компонент для обработки отправки данных в 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'
}
}
})
}
}
Буду признателен за любую помощь, чтобы помочь мне в этом, спасибо