Redux-순수 함수

함수는 인수라는 입력을 받아 반환 값으로 알려진 출력을 생성하는 프로세스입니다. 함수는 다음 규칙을 준수하는 경우 순수라고합니다.

  • 함수는 동일한 인수에 대해 동일한 결과를 반환합니다.

  • 평가에는 부작용이 없습니다. 즉, 입력 데이터를 변경하지 않습니다.

  • 지역 및 전역 변수의 변형이 없습니다.

  • 전역 변수처럼 외부 상태에 의존하지 않습니다.

함수에 입력으로 전달 된 값의 두 배를 반환하는 함수의 예를 살펴 보겠습니다. 일반적으로 f (x) => x * 2로 작성됩니다. 인수 값 2를 사용하여 함수를 호출하면 출력은 4, f (2) => 4가됩니다.

다음과 같이 JavaScript로 함수 정의를 작성해 보겠습니다.

const double = x => x*2; // es6 arrow function
console.log(double(2));  // 4

Here, double is a pure function.

Redux의 세 가지 원칙에 따라 순수한 함수, 즉 Redux의 감속기로 변경해야합니다. 이제 감속기가 왜 순수한 함수 여야하는지에 대한 의문이 생깁니다.

유형이 다음과 같은 액션을 전달하려고한다고 가정합니다. 'ADD_TO_CART_SUCCESS' 장바구니에 추가 버튼을 클릭하여 장바구니 애플리케이션에 항목을 추가합니다.

감속기가 아래와 같이 장바구니에 항목을 추가한다고 가정 해 보겠습니다.

const initialState = {
   isAddedToCart: false;
}
const addToCartReducer = (state = initialState, action) => { //es6 arrow function
   switch (action.type) {
      case 'ADD_TO_CART_SUCCESS' :
         state.isAddedToCart = !state.isAddedToCart; //original object altered
         return state;
      default:
         return state;
   }
}
export default addToCartReducer ;

가정 해 봅시다. isAddedToCart 부울 값을 반환하여 항목의 '장바구니에 추가'버튼을 비활성화 할시기를 결정할 수있는 상태 개체의 속성입니다. ‘true or false’. 이것은 사용자가 동일한 제품을 여러 번 추가하는 것을 방지합니다. 이제 새 객체를 반환하는 대신 위와 같이 상태에서 i AddedToCart prop을 변경합니다. 이제 장바구니에 항목을 추가하려고해도 아무 일도 일어나지 않습니다. 장바구니에 추가 버튼이 비활성화되지 않습니다.

이 동작의 이유는 다음과 같습니다.

Redux는 두 객체의 메모리 위치로 이전 객체와 새 객체를 비교합니다. 변경이 발생하면 감속기에서 새 객체를 기대합니다. 또한 변경이 발생하지 않으면 이전 개체를 다시 가져올 것으로 예상합니다. 이 경우 동일합니다. 이러한 이유로 Redux는 아무 일도 일어나지 않았다고 가정합니다.

따라서 감속기가 Redux에서 순수한 기능이어야합니다. 다음은 변경없이 작성하는 방법입니다.

const initialState = {
   isAddedToCart: false;
}
const addToCartReducer = (state = initialState, action) => { //es6 arrow function
   switch (action.type) {
      case 'ADD_TO_CART_SUCCESS' :
         return {
            ...state,
            isAddedToCart: !state.isAddedToCart
         }
      default:
         return state;
   }
}
export default addToCartReducer;