Angular + Cloud Firestore + NGRX / Entityを使用して完全なCRUD操作を実行しようとしています。
Idは、ngrx / entityを実行するために必要なパラメーターです。しかし、AngularフォームからFirestoreにアイテムを作成するとき、将来作成するドキュメントIDに自動的に割り当てられるため、IDはまだわかりません。
IDを送信せずにngrx / entityを使用してデータをfirestoreに送信するにはどうすればよいですか?
私は次のようなインターフェースを持っています:
エンティティのインターフェース:
export interface Recipe {
id: string;
recipeTitle: string;
}
actions.ts:
export const addRecipe = createAction(
'[Recipe Add Component] Add Recipe',
props<{ recipe: Recipe }>()
);
export const addRecipeSuccess = createAction(
'[Recipe Add Effect] Add Recipe Success',
props<{ recipe: Recipe }>()
);
export const addRecipeFailure = createAction(
'[Recipe Add Effect] Add Recipe Failure',
props<{ error: any }>()
);
Reducer.ts
// entity adapter
export const recipeAdapter: EntityAdapter<Recipe> = createEntityAdapter<Recipe>({
});
export interface RecipeState extends EntityState<Recipe> {
error: any;
selectedRecipe: Recipe;
}
export const initialState: RecipeState = recipeAdapter.getInitialState({
error: undefined,
selectedRecipe: undefined
});
export const recipeReducer = createReducer(
initialState,
on(RecipeActions.addRecipeSuccess, (state, action) => {
return recipeAdapter.addOne(action.recipe, state);
}),
on(RecipeActions.addRecipeFailure, (state, action) => {
return {
...state,
error: action.error
};
}),
Effects.ts
createRecipe$ = createEffect(() =>
this.actions$.pipe(
ofType(fromRecipeActions.addRecipe),
mergeMap(action =>
this.recipeService.createRecipe(action.recipe).pipe(
map(recipe => fromRecipeActions.addRecipeSuccess({recipe})),
catchError(error =>
of(fromRecipeActions.addRecipeFailure({ error }))
)
)
)
)
);
Component.tsを作成します
createRecipe(formGroup): void {
const recipeCreated = {
recipeTitle: formGroup.recipeTitle
};
this.store.dispatch(actions.addRecipe({recipe: recipeCreated}));
this.router.navigate(['tabs/recipe']);
}
service.ts
createRecipe(recipe): Observable<any> {
return from(this.firestore.collection(`recipes`).add(recipe));
}
getRecipes(): Observable<any[]> {
return this.firestore.collection<Recipe>('recipes').snapshotChanges().pipe(map(arr => {
return arr.map(doc => {
const data = doc.payload.doc.data();
return {
id: doc.payload.doc.id,
...data
} as Recipe;
});
}));
}
deleteRecipe(recipeId: string) {
return from(this.firestore.collection<Recipe>('recipes/').doc(recipeId).delete());
}
idをオプションにするカスタムIDセレクターを作成できます。
export const recipeAdapter: EntityAdapter<Recipe> = createEntityAdapter<Recipe>({
selectId: t => t.id || 0
});
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加