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;