es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo aplicar TypeScript para las funciones de Firebase en React?

01 Aug, 2023 Programación

Estoy en proceso de convertir uno de mis proyectos de React Firebase a TypeScript con la ayuda de la documentación de react-redux-firebase. Uno de los problemas que tengo es cómo definir correctamente los tipos para las funciones de Firebase y Firestore. Por ejemplo, aquí está mi función de acción de reductor de React.

import { Dispatch } from "redux";
import { PROJECT_TYPES } from "../../action-types/project";
import { PROJECT_ACTION } from "../../action/project";
import { IPROJECT } from "../../interface/project";

export const createProject = (project: IPROJECT) => async (dispatch:Dispatch<PROJECT_ACTION>, getState:any, { getFirebase, getFirestore }:any):Promise<void> => {

const firestore = getFirestore();
firestore.collection(&#39;projects&#39;).add({
    ...project, 
    authorFirstName: getState().firebase.profile.firstName,
    authorLastName:getState().firebase.profile.lastName,
    authorId:getState().firebase.auth.uid,
    createdAt:new Date()
}).then(() =&gt; {
    dispatch({
        type: PROJECT_TYPES.CREATE_PROJECT,
        payload: project
    })
}).catch((err:any) =&gt; {
  console.log({err})
    dispatch({  type: PROJECT_TYPES.CREATE_PROJECT_ERROR, payload: err })
})

}

Como se ve en el código anterior, he definido el tipo como “any” para las funciones getState, getFirebase y getFirestore. No estoy contento con ese tipo, así que quiero saber si hay una forma correcta de definir estos tipos.

Instrucciones seguidas desde el enlace http://react-redux-firebase.com/docs/api/getFirebase.html

Gracias de antemano.

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Hola,

    Como especialista en TI especializado en Reactjs, TypeScript, Firebase y Google Cloud Firestore, estaría encantado de ayudarte con tu pregunta sobre la definición de tipos para las funciones de Firebase y Firestore.

    En primer lugar, es bueno ver que estás utilizando TypeScript para agregar seguridad de tipos a tu proyecto de ReactJS. En cuanto a la definición de tipos para las funciones de Firebase y Firestore, en realidad puedes importarlos desde la biblioteca @types/firebase.

    Aquí tienes un ejemplo de cómo puedes importar los tipos y definirlos para tu función de acción:

    import { Dispatch } from "redux";
import { PROJECT_TYPES } from "../../action-types/project";
import { PROJECT_ACTION } from "../../action/project";
import { IPROJECT } from "../../interface/project";
import { FirebaseReducer } from "react-redux-firebase";
import { FirestoreReducer } from "redux-firestore";
import { Firestore } from "@types/firebase";


type GetState = () => {
  firebase: FirebaseReducer.Reducer<unknown, any="">;
  firestore: FirestoreReducer.Reducer;
};

type FirebaseFunction = <t>() => T;
type FirestoreFunction = () => Firestore;

type AsyncAction = (
  dispatch: Dispatch<project_action>,
  getState: GetState,
  { getFirebase, getFirestore }: { getFirebase: FirebaseFunction; getFirestore: FirestoreFunction }
) => Promise<void>;

export const createProject: AsyncAction = (project: IPROJECT) => async (
  dispatch,
  getState,
  { getFirebase, getFirestore }
): Promise<void> => {
  const firestore = getFirestore();
  firestore
    .collection("projects")
    .add({
      ...project,
      authorFirstName: getState().firebase.profile.firstName,
      authorLastName: getState().firebase.profile.lastName,
      authorId: getState().firebase.auth.uid,
      createdAt: new Date(),
    })
    .then(() => {
      dispatch({
        type: PROJECT_TYPES.CREATE_PROJECT,
        payload: project,
      });
    })
    .catch((err: any) => {
      console.log({ err });
      dispatch({ type: PROJECT_TYPES.CREATE_PROJECT_ERROR, payload: err });
    });
};

    En este ejemplo, estamos importando los tipos FirebaseReducer, FirestoreReducer y Firestore de la biblioteca @types/firebase. Luego estamos definiendo los tipos para las funciones getFirebase y getFirestore como FirebaseFunction y FirestoreFunction, respectivamente.

    También estamos definiendo un tipo personalizado GetState para definir la función getState que devuelve los reducers firebase y firestore. Por último, estamos definiendo el tipo AsyncAction que define la firma general de tipos para nuestra función de acción.

    Espero que esto te ayude. Avísame si tienes alguna pregunta o necesitas más ayuda.</unknown,>

Comments are closed.