NgRx 라우터 저장소를 사용하는 각도 라우터 URL 매개변수

상태가 있는 앱을 빌드할 때 진입점은 구성 요소의 상태를 초기화하는 핵심이지만 때로는 사용자가 북마크할 수 있도록 URL 내에서 애플리케이션 상태를 보존해야 하는 요구 사항이 있습니다. 또는 사용자 경험을 향상하고 탐색을 쉽게 만들기 위해 특정 애플리케이션 상태를 공유합니다.

대부분의 경우 구성 요소에 Angular Router와 ActivatedRoute를 결합하여 이러한 사례를 해결하고 이 책임을 구성 요소에 위임하거나 다른 경우에는 구성 요소와 효과를 혼합하여 해결하려고 합니다.

저는 Menorca에서 휴가를 계속할 예정이므로 오늘 아침에 Angular Router에서 상태를 처리하는 방법과 ngrx 라우터가 코드를 개선하고 구성 요소의 책임을 줄이는 데 어떻게 도움이 될 수 있는지 배우고 연습했습니다.

대본

사용자가 선택한 장소의 세부정보를 수정하고, URL을 공유하고, 나중에 동일한 상태로 돌아갈 수 있는 편집 페이지를 만들고 싶습니다. 예를 들어 http://localhost/places/2입니다. 여기서 2는 편집 중인 장소의 ID입니다. 또한 사용자는 작업을 수행한 후 홈 페이지로 돌아갈 수 있어야 합니다.

?이 기사는 NgRx 학습 시리즈의 일부입니다. 따라해보고 싶으신 분들은 꼭 확인해 보세요.

https://www.danywalls.com/understanding-when-and-why-to-implement-ngrx-in-angular

https://www.danywalls.com/how-to-debug-ngrx-using-redux-devtools

https://www.danywalls.com/how-to-implement-actioncreationgroup-in-ngrx

https://www.danywalls.com/how-to-use-ngrx-selectors-in-angular

https://danywalls.com/when-to-use-concatmap-mergemap-switchmap-and-exhaustmap-operators-in-building-a-crud-with-ngrx

start-with-ngrx 저장소를 복제합니다. 이 프로젝트는 ngrx와 애플리케이션을 준비하고 crud-ngrx 분기로 전환합니다.

https://github.com/danywalls/start-with-ngrx.git
git checkout crud-ngrx

코딩할 시간이에요!

편집 페이지

먼저 터미널을 열고 Angular CLI를 사용하여 새 구성 요소를 생성합니다.

ng g c pages/place-edit

다음으로 app.routes.ts를 열고 /places/:id 매개변수로 PlaceEditComponent를 등록합니다.

{
  path: 'places/:id',
  component: PlaceEditComponent,
},

편집할 장소 가져오기

저의 첫 번째 솔루션은 서비스, 효과, 라우터 및 활성화된 경로의 조합입니다. 여러 위치에 make add 로직이 필요합니다.

• 장소 서비스에 방법을 추가하세요.

• 액션 듣기

• 선택한 장소의 상태를 업데이트하려면 성공을 설정하세요.

• edit-place.comComponent에서 선택한 장소를 읽어옵니다.

먼저 Places.service.ts에 getById 메소드를 추가하고 해당 ID를 사용하여 장소를 가져옵니다.

getById(id: string): Observable<Place> {
  return this.http.get<Place>(`${environment.menorcaPlacesAPI}/${id}`);
}

다음으로, getById를 처리하는 새 작업을 추가하고, place.actions.ts를 열고 편집, 성공 및 실패 작업을 추가합니다.

// PlacePageActions
'Edit Place': props<{ id: string }>(),

// PlacesApiActions
'Get Place Success': props<{ place: Place }>(),
'Get Place Failure': props<{ message: string }>(),

이러한 작업을 처리하려면 리듀서를 업데이트하세요.

on(PlacesApiActions.getPlaceSuccess, (state, { place }) => ({
  ...state,
  loading: false,
  placeSelected: place,
})),
on(PlacesApiActions.getPlaceFailure, (state, { message }) => ({
  ...state,
  loading: false,
  message,
})),

place. Effects.ts를 열고, editPlace 작업을 수신하는 새 효과를 추가하고, placeService.getById를 호출한 다음, getPlaceSuccess 작업을 전달하는 응답을 받습니다.

export const getPlaceEffect$ = createEffect(
  (actions$ = inject(Actions), placesService = inject(PlacesService)) => {
    return actions$.pipe(
      ofType(PlacesPageActions.editPlace),
      mergeMap(({ id }) =>
        placesService.getById(id).pipe(
          map((apiPlace) =>
            PlacesApiActions.getPlaceSuccess({ place: apiPlace })
          ),
          catchError((error) =>
            of(PlacesApiActions.getPlaceFailure({ message: error }))
          )
        )
      )
    );
  },
  { functional: true }
);

이 솔루션은 유망해 보입니다. /places:id 경로로 이동하려면 editPlace 작업을 전달하고 place-card.comComponent.ts에 라우터를 삽입해야 합니다.

goEditPlace(id: string) {
  this.store.dispatch(PlacesPageActions.editPlace({ id: this.place().id }));
  this.router.navigate(['/places', id]);
}

효과가 있어요! 그러나 몇 가지 부작용이 있습니다. 다른 장소를 선택하고 해당 페이지로 돌아가면 선택 항목이 업데이트되지 않고 이전 항목이 로드될 수 있습니다. 또한 연결 속도가 느린 경우 아직 로드 중이기 때문에 "찾을 수 없음" 오류가 발생할 수 있습니다.

?Jörgen de Groot 덕분에 한 가지 해결책은 라우터를 효과가 있는 곳으로 옮기는 것입니다. 장소.효과.ts 파일을 열고 서비스와 라우터를 삽입합니다. editPlace 작업을 수신하고 데이터를 가져온 다음 작업을 탐색하고 전달합니다.

최종 코드는 다음과 같습니다.

export const getPlaceEffect$ = createEffect(
  (
    actions$ = inject(Actions),
    placesService = inject(PlacesService),
    router = inject(Router)
  ) => {
    return actions$.pipe(
      ofType(PlacesPageActions.editPlace),
      mergeMap(({ id }) =>
        placesService.getById(id).pipe(
          tap(() => console.log('get by id')),
          map((apiPlace) => {
            router.navigate(['/places', apiPlace.id]);
            return PlacesApiActions.getPlaceSuccess({ place: apiPlace });
          }),
          catchError((error) =>
            of(PlacesApiActions.getPlaceFailure({ message: error }))
          )
        )
      )
    );
  },
  { functional: true }
);

이제 사용자가 장소 목록을 클릭할 때만 탐색하는 문제를 해결했지만 페이지를 다시 로드할 때 작동하지 않습니다. 새 경로에서 상태가 준비되지 않았지만 효과를 사용할 수 있는 옵션이 있기 때문입니다. 수명주기 후크.

효과 수명 주기 후크를 사용하면 효과가 등록될 때 작업을 트리거할 수 있으므로 loadPlaces 작업을 트리거하고 상태를 준비하고 싶습니다.

export const initPlacesState$ = createEffect(
  (actions$ = inject(Actions)) => {
    return actions$.pipe(
      ofType(ROOT_EFFECTS_INIT),
      map((action) => PlacesPageActions.loadPlaces())
    );
  },
  { functional: true }
);

효과 수명 주기 및 ROOT_EFFECTS_INIT에 대해 자세히 알아보세요

상태가 준비되어 있지만 URL 상태에서 ID를 가져올 때 여전히 문제가 있습니다.

빠른 수정은 ngOnInit에서 활성화된 경로를 읽는 것입니다. ID가 있으면 editPlace 작업을 전달합니다. 이렇게 하면 selectedPlace 상태가 리디렉션되고 설정됩니다.

따라서 PlaceEditComponent에 다시 activateRoute를 삽입하고 ngOnInit에 로직을 구현하세요.

코드는 다음과 같습니다.

export class PlaceEditComponent implements OnInit {
  store = inject(Store);
  place$ = this.store.select(PlacesSelectors.selectPlaceSelected);
  activatedRoute = inject(ActivatedRoute);

  ngOnInit(): void {
    const id = this.activatedRoute.snapshot.params['id'];
    if (id) {
      this.store.dispatch(PlacesPageActions.editPlace({ id }));
    }
  }
}

It works! Finally, we add a cancel button to redirect to the places route and bind the click event to call a new method, cancel.

<button (click)="cancel()" class="button is-light" type="reset">Cancel</button>

Remember to inject the router to call the navigate method to the places URL. The final code looks like this:

export class PlaceEditComponent implements OnInit {
  store = inject(Store);
  place$ = this.store.select(PlacesSelectors.selectPlaceSelected);
  activatedRoute = inject(ActivatedRoute);
  router = inject(Router);

  ngOnInit(): void {
    const id = this.activatedRoute.snapshot.params['id'];
    if (id) {
      this.store.dispatch(PlacesPageActions.editPlace({ id }));
    }
  }

 cancel() {
  router.navigate(['/places']);
 }
}

Okay, it works with all features, but our component is handling many tasks, like dispatching actions and redirecting navigation. What will happen when we need more features? We can simplify everything by using NgRx Router, which will reduce the amount of code and responsibility in our components.

Why NgRx Router Store ?

The NgRx Router Store makes it easy to connect our state with router events and read data from the router using build'in selectors. Listening to router actions simplifies interaction with the data and effects, keeping our components free from extra dependencies like the router or activated route.

Router Actions

NgRx Router provide five router actions, these actions are trigger in order

• ROUTER_REQUEST: when start a navigation.

• ROUTER_NAVIGATION: before guards and revolver , it works during navigation.

• ROUTER?NAVIGATED: When completed navigation.

• ROUTER_CANCEL: when navigation is cancelled.

• ROUTER_ERROR: when there is an error.

Read more about ROUTER_ACTIONS

Router Selectors

It helps read information from the router, such as query params, data, title, and more, using a list of built-in selectors provided by the function getRouterSelectors.

export const { selectQueryParam, selectRouteParam} = getRouterSelectors()

Read more about Router Selectors

Because, we have an overview of NgRx Router, so let's start implementing it in the project.

Configure NgRx Router

First, we need to install NgRx Router. It provides selectors to read from the router and combine with other selectors to reduce boilerplate in our components.

In the terminal, install ngrx/router-store using the schematics:

ng add @ngrx/router-store

Next, open app.config and register routerReducer and provideRouterStore.

  providers: [
    ...,
    provideStore({
      router: routerReducer,
      home: homeReducer,
      places: placesReducer,
    }),
    ...
    provideRouterStore(),
  ],

We have the NgRx Router in our project, so now it's time to work with it!

Read more about install NgRx Router

Simplify using NgRx RouterSelectors

Instead of making an HTTP request, I will use my state because the ngrx init effect always updates my state when the effect is registered. This means I have the latest data. I can combine the selectPlaces selector with selectRouterParams to get the selectPlaceById.

Open the places.selector.ts file, create and export a new selector by combining selectPlaces and selectRouteParams.

The final code looks like this:

export const { selectRouteParams } = getRouterSelectors();

export const selectPlaceById = createSelector(
  selectPlaces,
  selectRouteParams,
  (places, { id }) => places.find((place) => place.id === id),
);

export default {
  placesSelector: selectPlaces,
  selectPlaceSelected: selectPlaceSelected,
  loadingSelector: selectLoading,
  errorSelector: selectError,
  selectPlaceById,
};

Perfect, now it's time to update and reduce all dependencies in the PlaceEditComponent, and use the new selector PlacesSelectors.selectPlaceById. The final code looks like this:

export class PlaceEditComponent {
  store = inject(Store);
  place$ = this.store.select(PlacesSelectors.selectPlaceById);
}

Okay, but what about the cancel action and redirect? We can dispatch a new action, cancel, to handle this in the effect.

First, open places.action.ts and add the action 'Cancel Place': emptyProps(). the final code looks like this:

 export const PlacesPageActions = createActionGroup({
  source: 'Places',
  events: {
    'Load Places': emptyProps(),
    'Add Place': props<{ place: Place }>(),
    'Update Place': props<{ place: Place }>(),
    'Delete Place': props<{ id: string }>(),
    'Cancel Place': emptyProps(),
    'Select Place': props<{ place: Place }>(),
    'UnSelect Place': emptyProps(),
  },
});

Update the cancel method in the PlacesComponent and dispatch the cancelPlace action.

 cancel() { 
    this.#store.dispatch(PlacesPageActions.cancelPlace());
  }

The final step is to open place.effect.ts, add the returnHomeEffects effect, inject the router, and listen for the cancelPlace action. Use router.navigate to redirect when the action is dispatched.

export const returnHomeEffect$ = createEffect(
  (actions$ = inject(Actions), router = inject(Router)) => {
    return actions$.pipe(
      ofType(PlacesPageActions.cancelPlace),
      tap(() => router.navigate(['/places'])),
    );
  },
  {
    dispatch: false,
    functional: true,
  },
);

Finally, the last step is to update the place-card to dispatch the selectPlace action and use a routerLink.

        <a (click)="goEditPlace()" [routerLink]="['/places', place().id]" class="button is-info">Edit</a>

Done! We did it! We removed the router and activated route dependencies, kept the URL parameter in sync, and combined it with router selectors.

Recap

I learned how to manage state using URL parameters with NgRx Router Store in Angular. I also integrated NgRx with Angular Router to handle state and navigation, keeping our components clean. This approach helps manage state better and combines with Router Selectors to easily read router data.

• Source Code: https://github.com/danywalls/start-with-ngrx/tree/router-store

• Resources: https://ngrx.io/guide/router-store

위 내용은 NgRx 라우터 저장소를 사용하는 각도 라우터 URL 매개변수의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!