앵글/리 듀스 상태를 유지하는 올바른 방법

Question

나는 앵글 + 리디렉션으로 쇼핑 카트 응용 프로그램을 구축 중입니다. 나는 (내 장바구니에 제품) 인터페이스의 각 객체의 배열을 가지고 :

export interface IProduct { 
    id: number; 
    description: string; 
    isAdded: boolean; 
} 

페이지의 제품는 버튼 카트

<div class="addBtn" (click)="addToCart(prod)"> 
    <span class="unaddedItem" *ngIf="!prod.isAdded; else added">Add to cart</span> 
    <ng-template> 
     <span class="addedItem" #added>In cart</span> 
    </ng-template> 
</div> 

에 추가 이

내가 원하는 것은 에 추가합니다 가있는 텍스트는 제품을 추가 할 때에 넣습니다. 나는 Rxjs 성공적으로 그것을했다,하지만 난 제품 페이지를 떠나 다음에 다시 갈 때, 추가 제품에 대한 내 카트에 스팬 (가 다시 표시 쇼핑 카트에 담기 추가) 손실됩니다. 그래서, 제 생각 엔 Redux이 제가 상태를 유지할 수있는 유일한 방법입니다.

일부 동작으로 감속기 기능을 작성했습니다. 여기에 그들 중 하나입니다 :

export function rootReducer(state, action){ 
    switch(action.type){ 
     case ADD_PRODUCT: 
      action.product.id = state.products.length + 1; 
      return Object.assign({}, state, { 
       products: state.products.concat(Object.assign({}, action.product)) 
      }) 
    } 
} 

그래서, 내 질문에 카트를 추가 한 후 객체의 상태를 유지하는 올바른 방법은 무엇입니까? 동일한 ADD_PRODUCT 조치를 사용해야합니까, 아니면 다른 동작, 예를 들어 MARK_ADDED을 작성하고 추가 된 객체 배열에 사용해야합니까? 따라서, 에 두 개의 다른 배열을 갖는 것은 제품과 으로 표시됩니다. 제품을 추가했는데, 그에 따라 추가 된 객체와 해당 상태가 유지됩니까?

Answer 1

먼저 로직을 사용자의 rootReducer에 추가하지 않겠습니다. Remember, your reducers mimic the shape of your data. 상태는 rootReducer에서 개별 상태 조각으로 이동해야합니다. 아래 예제에서 전체 상태를 반환하는 rootReducer가 이상적입니다. 전체 데이터 구조가 빌드 될 때까지 by_id 및 all_ids를 리턴하는 제품 및 카트 축소 기. 이것은 문서의 예에 배열 된 구조를 다음과

{ 
    products: { 
    by_id: { 
     1: { 
     id: 1, 
     name: "hairdryer", 
     price: "2.99", 
     in_cart: true 
     }, 
     2: { 
     id: 2, 
     name: "brush", 
     price: "299.99", 
     in_cart: false 
     } 
    }, 
    all_ids: [1, 2] 
    }, 
    cart: { 
    products_added: [1], 
    saved: false, 
    some_data: "foo" 
    } 
} 

:

장바구니 및 제품에 대한

, 나는이 라인을 따라 뭔가를 할 의향이 될 것입니다. add_to_cart 작업이 전달되면 해당 객체가 각 감속기를 통해 전달되고 제품에는이 데이터와 장바구니가 표시됩니다. 문서에 나와 있듯이 제품의 in_cart 감속기와 장바구니의 products_added 감속기의 switch 문을 사용합니다.

---

또한 감속기에 UUID 지정을 추가하는 것은 바람직하지 않습니다. 감속기의 역할은 단순히 상태가 어떻게 변하는 지 정의하고 상태를 정의하지 않는 것입니다. 당신의 행동이나 미들웨어에서 그렇게하십시오.

---

나는 하나의 키와 반대되는 상태를 통해 모든 행동을 전달할 것입니다. 그렇게하면 주에서 행동의 다른 부분이 더 필요하면 리팩토링 할 필요가 없습니다.