React State Management를 위해 Immer 사용

반응 응용 프로그램은 상태에 의존하여 응용 프로그램 데이터를 추적합니다. 상태는 사용자 상호 작용으로 변경됩니다. 상태가 변경되면 일반적으로 React의 setState 메소드를 사용하여 구현되는 사용자 인터페이스에 표시된 상태를 업데이트해야합니다.

React의 상태는 불변 (직접 수정할 수 없음)이므로 상태가 복잡해지면 상태를 업데이트하는 것은 매우 까다 롭고 이해하고 유지하기가 어려워집니다.

이것은 Immer가 시작되는 곳입니다. 이 기사는 Immer를 사용하여 React State Management를 단순화하는 방법을 살펴 봅니다. Immer는 "초안"(초안)의 개념을 사용하며, 이는 국가 자체가 아니라 국가의 사본으로 이해할 수 있습니다. Immer가 주에서 사본 작업을 수행 한 다음 원래 상태에 영향을 미치지 않고 안전한 장소에서 수정하는 것을 상상할 수 있습니다. 모든 업데이트는 드래프트에서 이루어지며 초안의 변경된 부분 만 실제 상태로 업데이트됩니다.

예를 들어, 응용 프로그램 상태는 다음과 같습니다.

 this.state = {
  이름 : 'Kunle',
  나이 : 30,
  도시 : '라고스',
  국가 : '나이지리아'
}

사용자가 31 번째 생일을 축하하는 경우 age 의 가치를 업데이트해야합니다. immer를 사용하여 상태 사본 (초안)이 생성됩니다.

이 사본이 사본을 Kunle에게 넘겨주는 메신저에게 넘겨 졌다고 상상해보십시오. 이제 두 개의 복제품이 있습니다 : 현재 상태와 드래프트 복제본은 Kunle에게 건네 주었다. Kunle은 초안의 age 31로 수정했습니다. 그런 다음 메신저는 수정 된 드래프트를 앱으로 반환하고 앱은 두 버전을 비교하고 age 만 업데이트됩니다. 왜냐하면 이것은 변경된 초안의 유일한 부분이기 때문입니다.

이 방법은 현재 상태가 직접 수정되지 않기 때문에 불변 상태의 원칙을 깨뜨리지 않습니다. Immer는 불변 상태의 관리를 단순화합니다.

실제 예 : 신호등

Immer와 함께 간단한 신호등 응용 프로그램을 구축합시다.

Immer를 사용하면 구성 요소 코드는 다음과 같습니다.

 const {produce} = immer;

클래스 앱이 연장 rect.component {
  상태 = {
    빨간색 : '빨간색', 
    노란색 : '블랙', 
    녹색 : '블랙',
    다음 : "노란색"
  };

  componentDidMount () {
    this.interVal = setInterVal (() => this.ChangeHandle (), 3000);
  }

  componentWillUnMount () {
    ClearInterval (this.interval);
  }

  핸들러 라이트 라이트 = () => {
    this.setstate (
      생산 (draft => {
        draft.red = '빨간색';
        draft.yellow = 'black';
        draft.green = 'black';
        draft.next = '옐로우';
      })
    );
  };

  handleyellowlight = () => {
    this.setstate (
      생산 (draft => {
        draft.red = '블랙';
        draft.yellow = '옐로우';
        draft.green = 'black';
        draft.next = 'Green';
      })
    );
  };

  handlegreenlight = () => {
    this.setstate (
      생산 (draft => {
        draft.red = '블랙';
        draft.yellow = 'black';
        draft.green = 'Green';
        draft.next = '빨간색';
      })
    );
  };

  ChangeHandle = () => {
    if (this.state.next === '옐로우') {
      this.handleyellowlight ();
    } else if (this.state.next === 'green') {
      this.handlegreenlight ();
    } 또 다른 {
      this.handleredlight ();
    }
  };

  렌더 () {
    반품 (
      <div classname="box">
        <div classname="circle" style="{{backgroundColor:" this.state.red></div>
        <div classname="circle" style="{{backgroundColor:" this.state.yellow></div>
        <div classname="circle" style="{{backgroundColor:" this.state.green></div>
      </div>
    );
  }
}

produce Immer가 제공하는 기본 기능입니다. 우리는 이것을 setState 메소드에 매개 변수로 전달합니다. produce 기능은 draft 인수로 받아들이는 함수를 수신합니다. 이 기능 내에서는 draft 사본을 수정할 수 있습니다.

더 간단한 글을 쓰는 방법 :

 const handlelight = (state) => {
  반환 농산물 (state, (draft) => {
    draft.red = '블랙';
    draft.yellow = 'black';
    draft.green = 'Green';
    draft.next = '빨간색';
  });
};

// 구성 요소에서 사용 :
handlegreenlight = () => {
  const nextstate = handlelight (this.state);
  this.setstate (NextState);
};

우리는 현재 상태와 produce 기능에 대한 인수로 draft 받아들이는 기능을 전달합니다.

또 다른 예 : 쇼핑 목록

반응을 한동안 사용한 경우 스프레드 연산자에 익숙해야합니다. 특히 배열 상태를 다룰 때 Immer를 사용하면 확장 연산자를 사용할 필요가 없습니다.

이를 더 설명하기 위해 쇼핑 목록 앱을 만들어 봅시다.

구성 요소 코드 :

 클래스 앱이 연장 rect.component {
  // ... (생성자 및 기타 방법) ...

  handlesUbmit = (e) => {
    e.preventDefault ();
    const newitem = {
      ID : uuid.v4 (),
      이름 : this.state.name,
      가격 : this.state.price
    };
    this.setstate (
      생산 (draft => {
        draft.list = draft.list.concat (newitem);
      })
    );
  };

  // ... (렌더 메소드) ...
}

신제품을 추가 할 때는 목록 상태를 업데이트해야합니다. setState 및 Extension 연산자 사용 :

 handlesUbmit = (e) => {
  // ...
  this.setstate ({list : [... this.state.list, newitem]});
};

여러 상태를 업데이트 해야하는 경우 확장 연산자를 사용하면 매우 복잡해질 수 있습니다. Immer를 사용하면 매우 간단 해집니다.

상태가 업데이트 된 후 콜백 함수를 호출하려면 어떻게해야합니까? 예를 들어, 목록에서 항목의 총 가격을 계산하려고합니다.

 handlesUbmit = (e) => {
  // ...
  this.setstate (
    생산 (draft => {
      draft.list = draft.list.concat (newitem);
    }), () => {
      this.calculateamount (this.state.list);
    }
  );
};

calculateamount = (list) => {
  총 = 0을하자;
  list.foreach (item => total = item.price);
  this.setstate (
    생산 (draft => {
      draft.totalamount = Total;
    })
  );
};

상태가 업데이트되고 업데이트 된 상태가 사용 된 후 콜백 함수가 호출됩니다.

Immer 고리

use-immer 는 React 응용 프로그램에서 상태를 관리 할 수있는 후크입니다. 간단한 카운터 예제로 시연합시다.

 "React"에서 React React;
"use-Immer"에서 {useimmer} 가져 오기;

const 카운터 = () => {
  const [count, updateCounter] = useImmer ({value : 0});

  함수 증분 () {
    updateCounter (draft => {
      Draft.Value;
    });
  }

  반품 (
    <div>
      <h1 id="카운터-count-value">카운터 {count.value}</h1>
      <button onclick="{increment}">증가</button>
    </div>
  );
};

내보내기 기본 카운터;

useImmer useState 와 유사합니다. 상태와 업데이트 기능을 반환합니다. 구성 요소가로드되면 상태 값은 useImmer 으로 전달 된 값과 동일합니다. 반환 된 업데이트 기능을 사용하여 카운터 값을 높이기 위해 increment 함수를 만들 수 있습니다.

Immer는 또한 useReducer : useImmerReducer 와 유사한 후크를 제공합니다.

요약

다음 프로젝트에서 Immer를 사용하거나 점차 현재 프로젝트에 적용 할 수 있습니다. 반응 상태 관리를 단순화합니다. 코드 예제는 Github에서 찾을 수 있습니다. (Github 링크가 존재하는 경우 제공하십시오)

위 내용은 React State Management를 위해 Immer 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!