Estoy creando una aplicación CRUD usando el kit de herramientas redux y firestore, y no puedo averiguar cómo eliminar un elemento de firestore, y realmente no sé por qué el siguiente código no funciona. Aquí está el código relevante de la porción:

 export const recipeSlice = createSlice({ name: 'recipesSlice', initialState: { recipes: [] }, reducers: { ADD_RECIPE: (state, action) => { state.recipes.push(action.payload) }, DELETE_RECIPE: (state, action) => { state.recipes = state.recipes.filter((recipe) => recipe.recipeId !== action.payload.recipeId) }, extraReducers: (builder) => { builder.addCase(getRecipes.fulfilled,(state, {payload}) => { state.recipes = payload }) .addCase(addRecipeFirestore.fulfilled, (state, {payload}) => { state.recipes = payload }) } })

Y aquí están los dos procesadores asíncronos que funcionan:

 export const getRecipes = createAsyncThunk( 'recipes/getRecipes', async () => { const snapshot = await getDocs(collection (db, 'recipes')) const array = [] snapshot.forEach((doc) =>{ array.push(doc.data()) }) return array } ) export const addRecipeFirestore = createAsyncThunk( 'recipes/addRecipe', async (newRecipe) => { const docRef = await addDoc(collection(db, "recipes"), newRecipe) console.log(docRef.data()) return docRef.data() } )

Y he aquí la que no puedo, por mi vida hacer obra:

 export const deleteRecipe = ({recipeId}) => { return async (dispatch) => { const docRef = doc(db, "recipes", `${recipeId}`) await deleteDoc(docRef) dispatch(DELETE_RECIPE({recipeId})) } }

No usé createAsyncThunk porque no parecía ser un buen caso de uso, pero podría estar equivocado. La función deleteRecipe activará el reductor DELETE_RECIPE y eliminará el elemento de la tienda redux, pero permanecerá en Firestore.