Angularアプリからngrx / entityを使用してFirestoreにIDを渡さずにアイテムを作成するにはどうすればよいですか?

ルディF

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]

編集
0

コメントを追加

0

関連記事

Related 関連記事

ホットタグ

アーカイブ