리액트 리덕스: 리덕터에 논리가 포함되어 있는지 여부

리액트 리덕스: 리덕터에 논리가 포함되어 있는지 여부

케이스 추가, 갱신, 삭제를 할 수 있는 카트 리듀서 기능이 있습니다.레독스 스토어에도 제품군이 있습니다.제품 배열에 2개의 아이템이 추가되면 2개의 아이템이 아닌 수량 값을 늘립니다.주요 질문은 제품 배열에 이미 정확한 제품이 포함되어 있는지, 제품 수량에 대한 업데이트만 반환하는지, 또는 기존 제품을 확인하고 새 제품을 추가하거나 수량을 업데이트하는 프레젠테이션 컴포넌트 내에서 이 동작을 처리해야 하는지 여부입니다.

function CartReducer (state = initialState, action) {
  switch (action.type) {
    case AddToCart:
      return {
        ...state,
        products: [...state.products, action.product],
        totalPrice: state.totalPrice += (action.price * action.quantity)
      }

    case RemoveItemCart:

      return {
        ...state,
        products: [
          ...state.products.slice(0, action.index),
          ...state.products.slice(action.index + 1)
        ]
      }

    case UpdateItemQuantity:
      return {
        ...state,
        products: state.products.map((product, index) => {
          if (index === action.index) {
            return Object.assign({}, product, {
              quantity: action.quantity
            })
          }
          return product
        })
      }

    default:
      return state
  }
}

Reducer와 Action Creator 간의 논리 분할에 관한 Redux FAQ 항목에 따르면:

리듀서나 액션 크리에이터에 어떤 논리를 넣어야 하는지에 대한 명확한 해답은 없습니다.일부 개발자는 "뚱뚱한" 액션 크리에이터를 선호하며 단순히 액션에서 데이터를 가져와 해당 상태로 맹목적으로 병합하는 "씬" 리덕터를 사용합니다.다른 사람들은 액션을 가능한 한 작게 유지하고 액션 크리에이터에서 getState() 사용을 최소화하려고 합니다(이 질문의 목적상 sagas나 observatible 등의 다른 비동기 접근법은 "action creator" 범주에 속합니다).

환원 장치에 더 많은 논리를 적용하면 몇 가지 잠재적인 이점이 있습니다.액션 타입이 보다 의미 있고 의미 있는 것이 될 가능성이 있습니다('SET_STATE'가 아닌 'USER_UPDATED' 등).또한 리듀서에 로직이 많아지면 시간 이동 디버깅에 의해 더 많은 기능이 영향을 받게 됩니다.

이 코멘트는 이분법을 잘 요약하고 있다.

문제는 액션 크리에이터에 무엇을 넣느냐, 리듀서에 무엇을 넣느냐입니다.지방과 얇은 액션 오브젝트 중 어느 쪽을 선택할 것인가 하는 것입니다.작업 생성기에 모든 논리를 넣으면 기본적으로 상태 업데이트를 선언하는 팻 작업 개체가 생성됩니다.환원기는 순수해지고, 멍청해지고, 이것을 추가하고, 그것을 제거하고, 이 기능들을 업데이트합니다.그것들은 작곡하기 쉬울 것이다.그러나 귀사의 비즈니스 논리는 그리 많지 않습니다.리듀서에 로직을 더 넣으면 대부분의 데이터 로직이 한 곳에 배치되는 신액션 오브젝트가 생깁니다만, 리듀서는 다른 브랜치의 정보가 필요할 수 있기 때문에 구성하기가 어렵습니다.결국 대형 리듀서 또는 리듀서가 생기게 되고, 이 경우 주의 상층부에서 추가 인수를 받게 됩니다.

나는 또한 "두툼하고 얇은" 감량기에 대한 내 생각을 썼다.

액션 크리에이터에게 더 많은 논리를 투입하는 것과 환원기에 더 많은 논리를 투입하는 것에는 타당한 단점이 있습니다.최근에 발견한 한 가지 좋은 점은 리듀서의 논리가 더 많으면 시간 여행 디버깅을 할 때 다시 실행할 수 있는 것이 많아진다는 것입니다(일반적으로 좋은 일입니다).

나는 개인적으로 두 가지 논리를 동시에 내세우는 경향이 있다.액션을 발송해야 하는지, 발송해야 하는지, 발송해야 하는지 여부를 결정하기 위해 시간이 걸리는 액션 크리에이터를 작성합니다.그러나 나는 종종 액션의 내용을 보고 대응하여 복잡한 상태 업데이트를 수행하는 해당 축소판도 작성한다.

갱신하다

2020년을 기점으로 환원기에 가능한 한 많은 논리를 넣을 것을 권장합니다.

가능하면 새로운 상태를 계산하기 위한 논리를 (클릭 핸들러와 같이) 준비 및 디스패치하는 코드가 아닌 적절한 리덕터에 최대한 넣도록 합니다.이를 통해 더 많은 실제 앱 로직을 쉽게 테스트할 수 있고, 시간 이동 디버깅을 보다 효과적으로 사용할 수 있으며, 돌연변이와 버그로 이어질 수 있는 일반적인 실수를 방지할 수 있습니다.

새로운 상태의 일부 또는 전부를 먼저 계산해야 하는 유효한 경우(예: 고유 ID 생성)가 있지만 최소한으로 유지해야 합니다.

당연하지!환원기는 순수한 함수여야 하므로 논리도 순수해야 합니다.이것은 부작용이 없어야 한다는 것을 의미한다.부작용은 다음을 포함한다(이에 국한되지는 않는다).

• 데이터베이스 요구/스토어
• 파일 IO
• REST/비동기 호출
• 전역 또는 외부 돌연변이
• 모든 종류의 데이터 돌연변이

따라서 reducer는 들어오는 상태를 변환하지 않고 복사본에만 수정한 복사본을 반환해야 합니다.불변의 값(문자열, 숫자, 정의되지 않은 값 등)은 그대로 반환할 수 있습니다.변경되지 않은 경우에는 그대로 반환할 수 있습니다.그러나 입력을 변경해야 하는 경우 새 복사본 또는 새 값을 반환합니다.

리덕터에서 호출되는 로직과 관련하여, 이 모든 코드가 이러한 요구 사항을 충족하는 한, 리덕스 패턴과 일치합니다.

유감스럽게도 JavaScript는 어떤 코드가 부작용을 일으키는지 확실하게 알 수 있는 방법이 없기 때문에(다른 언어에서는 그러하다) 호출하는 내용을 인식하기만 하면 됩니다.

실패하면 Redux가 고장 나나요?아니요. 하지만 당신(또는 Flux/Redux 개발자들)이 기대하는 대로 작동하지 않을 수도 있습니다.

아니, 논리를 포함하면 안 돼

액션은 리듀서가 적절한 위치로 분할하는 큰 물체를 모아 방출한다.

큰 개체 대신 작업 작성자의 각 단계에서 작업을 절차적으로 디스패치할 수 있습니다.이것은 상위 답변이 촉진하는 것으로 보입니다(단, 플레인 레덕스에서는 불가능).

---

• 컴포넌트: 기존 리덕스 데이터를 액션으로 이행

• 조치: 데이터 수집 및 대규모 객체 방출(가능한 한 많은 리듀서에 적용 가능)

• 리듀서: 반복되지 않는 세밀한 플랫 스토리지용 액션 오브젝트를 추출합니다(단일화, 용장화, 네스트된 폴더와는 반대).명시적인 것을 추천합니다.initialState손쉬운 유지보수와 명백한 데이터 형태(상태는 모양을 변경하지 않아야 합니다. 조인된 개체를 사용할 수 없는 경우 다음 방법으로 직렬화해야 함)id경우에 따라서는 풀 오브젝트를 네스트하는 것이 아니라).

  안id시리얼화된 메모리 레퍼런스 또는 다른 내용을 가지고 있을 수 있지만 다음과 같은 "메모리"로 간주할 수 있습니다.===그 자체,id오브젝트 참조입니다.시리얼화 되었습니다.

• * 부작용: 후속 액션 리스너/디스패처, 초기 이벤트 발생까지 기다리지 않을 때 유용합니다(sags는 서브스크립션 기반, thunks는 선언 체인).

---

경험의 법칙은 모든 것을 가능한 한 열심히 하는 것이다.

신속한 운용(조기 복귀, Fail Fast, Highing State 등)을 통해 특정 의존관계가 동시에 존재하는지 여부를 명확히 하고 쉽게 판단할 수 있습니다.

신속한 운영은 "관심 분리" 및 모듈러형, 선언형, 스테이트풀형, 실용형, 읽기 쉬운 코드(의존관계 선언, 운영 및 반환)의 단순한 주제와 일치합니다.

그 외의 모든 것은 시퀀싱의 문제이며, 가능한 한 열심히 해야 한다.

리듀서는 어떤 것도 "하고 싶지 않은" 장소입니다.이는 사실상 "반환"이며 단순히 작업 개체에서 데이터를 선택해야 합니다.

미들웨어에서 무엇을 하고 싶은지 생각해 보세요.모든 논리를 리듀서에 넣으면 미들웨어의 레코드에 비즈니스 논리가 적용되지 않습니다.

1. dispatch(새로운 Update Person(사람))
2. 미들웨어를 실행하여 Update Person 액션을 가로채다
3. reducer - 개인의 연령 값을 업데이트합니다.

스토어에 레코드를 저장한다고 하면 리듀서 로직이 너무 늦게 실행되어 미들웨어에서 필요한 상태의 변경된 레코드에 액세스할 수 없게 됩니다.

언급URL : https://stackoverflow.com/questions/47227419/react-redux-should-reducers-contain-any-logic