Redux 로의 깊은 다이빙

코어 포인트

Redux는 예측 가능한 상태 컨테이너 역할을하여 최신 응용 프로그램에서 상태 관리를 단순화하며, 이는 응용 프로그램이 스케일링 될 때 응용 프로그램의 안정성을 유지하는 데 중요합니다.

TypeScript 통합은 유형 안전을 강제하여 Redux를 향상시켜 예측 가능성의 계층을 추가하고 리팩토링을 단순화하여 대형 코드베이스를 유지하는 데 도움이됩니다.

Redux의 감속기는 부작용이 없도록하여 순수한 기능으로 설계되어 상태 관리의 테스트 가능성과 신뢰성을 향상시킵니다.
• Jest를 사용하여 단위 테스트를 단순화하고 Jest는 TypeScript와 완벽하게 작동하여 Redux 작업 및 리더러를 테스트하여 모든 구성 요소가 예상대로 작동하도록합니다.
이 기사는 급여 엔진을 구축하여 Redux의 실제 구현을 보여 주며 Redux가 상태 전환을 관리하고 실제 애플리케이션 시나리오에서 부작용을 처리하는 방법을 보여줍니다.
상태가 많은 현대 적용을 구축하는 것은 복잡한 작업입니다. 상태가 변경됨에 따라 응용 프로그램은 예측할 수없고 유지하기가 어려워집니다. 이곳은 Redux가 들어오는 곳입니다. Redux는 상태를 처리하기위한 가벼운 라이브러리입니다. 그것을 상태 기계로 생각하십시오.
• 이 기사에서는 급여 처리 엔진을 구축하여 Redux의 상태 컨테이너를 깊이 탐색 할 것입니다. 이 앱은 보너스 및 주식 옵션과 같은 모든 추가 기능과 함께 급여를 저장합니다. 솔루션을 간단하게 유지하기 위해 유형 확인에 순수한 JavaScript와 TypeScript를 사용하겠습니다. Redux는 테스트하기가 매우 쉽기 때문에 Jest를 사용하여 응용 프로그램을 확인합니다.
이 튜토리얼에서는 JavaScript, Node 및 NPM에 대한 이해가 있다고 가정합니다.
• 먼저,이 응용 프로그램을 npm으로 초기화 할 수 있습니다
테스트 명령을 요청할 때 농담을 계속 사용하십시오. 이것은 NPM T가 농담을 시작하고 모든 단위 테스트를 실행한다는 것을 의미합니다. 기본 파일은 INDEX.js입니다. 나머지 NPM Init 질문에 자유롭게 답변하십시오.
• 나는 TypeScript를 사용하여 유형 확인을 수행하고 데이터 모델을 결정합니다. 이것은 우리가 구축하려는 것을 개념화하는 데 도움이됩니다.
typeScript로 시작하려면 :

나는 개발 워크 플로우에 devddependencies의 일부 의존성을 배치 할 것입니다. 이것은 개발자를 위해 어떤 의존성이 준비되었고 어떤 의존성이 생산 환경에서 어떤 종속성을 사용할 것인지 명확하게 보여줍니다. TypeScript가 준비되면 package.json에서 시작 스크립트를 추가하십시오.

<.> SRC 폴더 아래에서 index.ts 파일을 만듭니다. 이것은 소스 파일을 프로젝트의 나머지 부분과 분리합니다. NPM을 시작하면 솔루션이 실행되지 않습니다. TypeScript를 구성해야하기 때문입니다.

다음 구성으로 tsconfig.json 파일을 만듭니다 :

이 구성을 TSC 명령 줄 인수에 넣을 수있었습니다. 예를 들어, TSC SRC/Index.ts -strict .... 그러나이 모든 것을 별도의 파일에 넣는 것은 훨씬 더 명확합니다. package.json의 시작 스크립트에는 TSC 명령 만 필요합니다.

다음은 좋은 출발점과 각 옵션을 제공하는 합리적인 컴파일러 옵션이 있습니다.

엄격 : 모든 엄격한 유형 확인 옵션을 활성화하십시오. - - -noimplicitany, -strictnullChecks 등.

lib : 컴파일에 포함 된 라이브러리 파일 목록.

<:> outdir :이 디렉토리로 출력을 리디렉션하십시오.
• sourcemap : 디버깅을 위해 소스 맵 파일을 생성합니다.
파일 : 컴파일러에 제공된 입력 파일.
단위 테스트에 Jest를 사용하기 때문에 계속 추가 할 것입니다.
• ts-jest 종속성 테스트 프레임 워크에 대한 유형 확인을 추가합니다. 주목할만한 점은 package.json에 Jest 구성을 추가하는 것입니다.
이를 통해 테스트 프레임 워크가 TypeScript 파일을 선택하고 변환하는 방법을 알 수 있습니다. 좋은 기능은 단위 테스트를 실행할 때 유형 확인을 수행 할 수 있다는 것입니다. 이 프로젝트가 준비되었는지 확인하려면 index.test.ts 파일이 포함 된 __tests__ 폴더를 작성하십시오. 그런 다음 위생 점검이 수행됩니다. 예를 들면 :
이제 npm 시작을 실행하면 npm t는 오류를 일으키지 않습니다. 이것은 이제 우리가 솔루션을 구축하기 시작할 수 있음을 알려줍니다. 그러나이 작업을 수행하기 전에 프로젝트에 Redux를 추가합시다.
• 이 의존성은 생산 환경에서 사용됩니다. 따라서 -save-dev에 포함시킬 필요가 없습니다. package.json을 확인하면 종속 상태가됩니다.
실제 작업의 PayStop 엔진 급여 엔진에는 임금, 상환, 보너스 및 주식 옵션이 포함됩니다. Redux에서는 상태를 직접 업데이트 할 수 없습니다. 대신, 새로운 변경 사항을 저장에 알리는 조치가 예정되어 있습니다.

그래서 이것은 다음 작업 유형을 남깁니다

Pay_day Operation 유형을 사용하여 월급 날에 대한 검사를 발행하고 급여 기록을 추적 할 수 있습니다. 이러한 유형의 운영은 급여 엔진을 완벽하게 만들기 위해 나머지 디자인을 안내합니다. 그들은 기본 임금을 설정하는 것과 같은 주 수명주기에서 이벤트를 포착합니다. 이러한 조치 이벤트는 클릭 이벤트 또는 데이터 업데이트 등 모든 컨텐츠에 첨부 될 수 있습니다. Redux 작동 유형은 스케줄링 출처에 대해 추상적입니다. 상태 컨테이너는 클라이언트 및/또는 서버에서 실행할 수 있습니다.

npm init

typeScript 유형 이론을 사용하여 상태 데이터를 기반으로 데이터 모델을 결정합니다. 운영 유형 및 선택 금액과 같은 각 급여 작업에 대해. Pay_day는 급여 처리를 위해 자금이 필요하지 않기 때문에 금액은 선택 사항입니다. 내 말은, 그것은 고객에게 청구 할 수 있지만 지금은 무시할 수 있습니다 (아마도 두 번째 판에 소개 될 수 있음).

예를 들어 SRC/index.ts : 에 넣으십시오

npm i typescript --save-dev

급여 상태의 경우 기본 급여, 보너스 등에 대한 속성이 필요합니다. 우리는 또한이 상태를 사용하여 급여 기록을 유지할 것입니다.

이 TypeScript 인터페이스를 수행해야합니다

npm init

각 속성에 대해 TypeScript는 결장을 사용하여 유형을 지정합니다. 예를 들어, : 숫자. 이는 유형 계약을 결정하고 유형 검사기에 예측 가능성을 추가합니다. 명시 적 유형 선언이있는 유형 시스템을 사용하여 Redux를 향상시킬 수 있습니다. Redux State 컨테이너는 예측 가능한 동작을 위해 제작 되었기 때문입니다.

이 아이디어는 미쳤거나 급진적이지 않습니다. 학습 Redux 1 장 (Sitepoint Premium 회원 만 해당) 이이를 잘 설명합니다.

응용 프로그램이 변경됨에 따라 유형 확인에 추가 예측 가능성이 추가됩니다. 응용 프로그램이 확장됨에 따라 유형 이론은 또한 대형 코드 세그먼트의 재구성을 단순화하는 데 도움이됩니다.

형식 개념화 엔진을 사용하면 다음과 같은 작업 기능을 작성하는 데 도움이됩니다.

좋은 점은 ProcessBasePay ( 'ABC')를 시도하면 유형 체커가 경고한다는 것입니다. 유형 계약 파괴는 상태 컨테이너의 예측 가능성을 줄입니다. 급여 프로세서를보다 예측할 수 있도록 Payrollaction과 같은 단일 작업 계약을 사용합니다. 금액은 ES6 속성 약어를 통해 작동 오브젝트에 설정됩니다. 더 전통적인 접근 방식은 양입니다 : 양은 더 장점입니다. () = & gt; ({})와 같은 화살표 기능은 객체 리터럴을 반환하는 함수를 작성하는 간결한 방법입니다.

순수한 함수로서의 감소 감속기 기능에는 상태 및 작업 매개 변수가 필요합니다. 상태는 기본값을 가진 초기 상태를 가져야합니다. 그래서 우리의 초기 상태가 어떻게 생겼는지 상상할 수 있습니까? 빈 급여 역사 목록으로 처음부터 시작해야한다고 생각합니다.

예 :

npm i typescript --save-dev

유형 검사기는이 객체에 속하는 올바른 값인지 확인합니다. 초기 상태에서 감속기 기능을 만들기 시작합니다.

Redux Reducer에는 모든 작동 유형이 스위치 문에 의해 처리되는 패턴이 있습니다. 그러나 모든 스위치 사례를 반복하기 전에 재사용 가능한 로컬 변수를 만들 것입니다.

글로벌 상태를 변경하지 않으면 로컬 변수를 변경할 수 있습니다. 나는이 변수가 향후 변화 할 것이라고 전달하기 위해 LET 연산자를 사용합니다. 글로벌 상태 (예 : 상태 또는 운영 매개 변수)를 변경하면 감속기가 부정 할 수 있습니다. 이 기능적 패러다임은 감속기 기능이 순수하게 유지되어야하기 때문에 중요합니다. 초보자에서 닌자 11 장 (itepoint premium 멤버 만)까지의 JavaScript.

첫 번째 유스 케이스를 처리하려면 REDICER의 스위치 명령문을 시작하십시오.

나는 ES6 REST 연산자를 사용하여 상태 속성을 변경하지 않도록합니다. 예를 들어 ... 상태. 새 개체에서 나머지 연산자 후 모든 속성을 덮어 쓸 수 있습니다. BasePay는 해체에서 나오는데, 이는 다른 언어에서 패턴 일치하는 것과 매우 유사합니다. compuTeToTalPay 함수는 다음과 같이 설정됩니다

돈이 회사 주식을 구매하는 데 사용될 때 스톡 옵션을 공제 할 것입니다. 상환을 다루고 싶다고 가정하십시오 :

npm init

금액은 선택 사항이므로 실패를 줄이기위한 기본값이 있는지 확인하십시오. 유형 검사기 가이 트랩을 발견하고 경고하기 때문에 이것은 TypeScript의 장점입니다. 유형 시스템은 특정 사실을 알고 있으므로 합리적인 가정을 할 수 있습니다. 보너스를 다루고 싶다고 가정 해 봅시다 :

이 모드는 상태 만 유지하기 때문에 감속기를 읽을 수있게합니다. 작업량을 얻고 총 급여를 계산하며 새 객체 텍스트를 만듭니다. 주식 옵션을 다룰 때는 다른 것이 없습니다 :

급여 담보 처리하려면 보너스와 상환이 필요합니다. 이 두 속성은 각 급여에서 상태에 보관되지 않습니다. 그리고 급여 기록에 항목을 추가하십시오. 기본 임금과 주식 옵션은 자주 변하지 않기 때문에 주에 보관할 수 있습니다. 이를 염두에두고 Pay_day가 처리되는 방식입니다.

npm i typescript --save-dev

NewPayHistory와 같은 배열에서는 휴식을위한 반의어 인 Extension 연산자를 사용하십시오. 컬렉션 개체의 나머지 부동산과 달리 프로젝트를 확장합니다. 예를 들어, [... 급여]. 두 연산자는 비슷해 보이지만 동일하지 않습니다. 인터뷰 질문에 나타날 수 있으므로주의 깊게주의하십시오.

급여에 POP ()를 사용하면 상태가 변경되지 않습니다. 왜? Slice ()가 새로운 배열을 반환하기 때문입니다. JavaScript의 배열은 참조로 복사됩니다. 새로운 변수에 배열을 할당해도 기본 객체가 변경되지는 않습니다. 따라서 이러한 유형의 물체를 처리 할 때는주의를 기울여야합니다.

"start": "tsc && node .bin/index.js"

LastPayHistory가 정의되지 않았을 가능성이 높기 때문에 가난한 사람의 널 값 합병을 사용하여 초기화를 0으로 초기화합니다. (O && O.Property) || 병합에 사용됩니다. 향후 버전의 JavaScript 또는 TypeScript에서 더 우아한 방법이있을 수 있습니다.

각 Redux Reducer는 기본 분기를 정의해야합니다. 상태가 정의되지 않도록하기 위해 :

{
  "compilerOptions": {
    "strict": true,
    "lib": ["esnext", "dom"],
    "outDir": ".bin",
    "sourceMap": true
  },
  "files": [
    "src/index"
  ]
}

테스트 감소 기능 순수한 기능을 작성하는 데있어 많은 이점 중 하나는 테스트하기 쉽다는 것입니다. 단위 테스트는 예측 가능한 동작을 기대 해야하는 테스트이며 빌드의 일부로 모든 테스트를 자동화 할 수 있습니다. __tests __/index.test.ts에서 가상 테스트를 취소하고 관심있는 모든 기능을 가져옵니다.

모든 기능은 내보내기로 설정되어 있으므로 가져올 수 있습니다. 기본 급여의 경우 급여 엔진 감소기를 시작하고 테스트하십시오.

redux는 초기 상태를 정의되지 않은 상태로 설정합니다. 따라서 감속기 기능에서 기본값을 제공하는 것이 항상 좋은 생각입니다. 상환을 처리하는 것은 어떻습니까?
보너스 처리 패턴은 다음과 같습니다.

재고 옵션의 경우 <:>

StockOptions가 TotalPay보다 클 때 TotalPay는 변경되지 않아야합니다. 이 가상의 회사는 윤리적이기 때문에 직원들로부터 돈을 받고 싶지 않습니다. 이 테스트를 실행하면 StockOptions가 공제되므로 TotalPay는 -10으로 설정됩니다. 이것이 우리가 코드를 테스트하는 이유입니다! 총 급여가 계산되는 장소를 고치겠습니다.

npm init

직원이 벌어 들인 돈이 회사 주식을 구매하기에 충분한 돈이 없다면 공제를 계속 건너 뛰십시오. 또한 스톡 옵션을 0으로 재설정해야합니다

이 수정은 NewStockoptions에 충분한 돈이 있는지 여부를 결정합니다. 이를 통해 단위 테스트가 통과하면 코드가 건전하고 의미가 있습니다. 우리는 공제를하기에 충분한 돈이있는 긍정적 인 사용 사례를 테스트 할 수 있습니다.

급여의 경우 여러 상태를 사용하여 테스트하고 일회성 트랜잭션이 지속되지 않도록하십시오.

npm i typescript --save-dev

보너스를 확인하고 상환을 0으로 재설정하기 위해 Oldstate를 조정하는 방법에 유의하십시오.

Reducer의 기본 분기는 어떻습니까?

"start": "tsc && node .bin/index.js"

redux는 처음에 init_action과 같은 작업 유형을 설정합니다. 우리는 우리의 리소셔에 초기 상태 세트가 있는지 여부에만 관심이 있습니다.

모든 내용을 통합 이 시점에서 Redux가 디자인 패턴인지 궁금해 할 수 있습니다. 당신이 그것이 패턴이자 가벼운 라이브러리라고 대답한다면, 당신은 옳습니다. index.ts에서 가져 오기 redux :

{
  "compilerOptions": {
    "strict": true,
    "lib": ["esnext", "dom"],
    "outDir": ".bin",
    "sourceMap": true
  },
  "files": [
    "src/index"
  ]
}

다음 코드 예제는이 IF 문을 감싸 수 있습니다. 이것은 스톱 갭이므로 단위 테스트는 통합 테스트로 누출되지 않습니다.

실제 프로젝트에서는이 작업을 수행하지 않는 것이 좋습니다. 구성 요소를 분리하기 위해 모듈을 별도의 파일에 배치 할 수 있습니다. 이로 인해 읽기가 더 쉽고 누출되지 않습니다. 단위 테스트는 또한 모듈이 독립적으로 실행된다는 사실의 이점도 있습니다.

PayRollEnginerEducer를 사용하여 Redux Storage를 시작하십시오 :

각 store.subscribe ()는 청소에 사용할 수있는 후속 Unsubscribe () 함수를 반환합니다. 스토리지를 통해 예약 될 때 콜백을 수신하지 않습니다. 여기서는 Store.getState ()를 사용하여 현재 상태를 콘솔에 출력합니다.

npm i jest ts-jest @types/jest @types/node --save-dev

직원이 300 명을 벌고 50 개의 상환, 100 개의 보너스, 15 명을 회사 주식으로 받았다고 가정합니다.

더 재미있게 만들려면 또 다른 50 번 상환을하고 또 다른 급여를 처리하십시오.

마지막으로, 다른 급여를 실행하고 Redux Storage를 수신 거부하십시오 :

최종 결과는 다음과 같습니다

표시된대로, Redux는 상태를 유지하고 상태를 변경하며 가입자에게 깔끔한 작은 패키지로 통지합니다. Redux를 State Machine으로 생각하십시오. 이것은 진정한 상태 데이터 소스입니다. 이 모든 것은 음향 기능 패러다임과 같은 코딩 모범 사례를 채택합니다.
결론 Redux는 복잡한 상태 관리 문제에 대한 간단한 솔루션을 제공합니다. 그것은 예측 불가능 성을 줄이기 위해 기능적 패러다임에 의존합니다. 감속기는 순수한 기능이기 때문에 단위 테스트는 매우 쉽습니다. Jest를 사용하기로 결정했지만 기본적인 주장을 지원하는 모든 테스트 프레임 워크가 작동합니다.

"jest": {
  "preset": "ts-jest"
}

TypeScript는 유형 이론을 사용하여 추가 보호 계층을 추가합니다. 유형 확인을 기능 프로그래밍과 결합하면 거의 중단되지 않는 견고한 코드가 나타납니다. 가장 중요한 것은 TypeScript가 가치를 추가하면서 작동하는 방식으로 얻지 못하는 것입니다. 일단 유형 계약이 마련되면 추가 인코딩이 거의 없습니다. 유형 검사기는 나머지를 수행합니다. 좋은 도구와 마찬가지로 TypeScript는 보이지 않는 상태에서 인코딩 징계를 자동화합니다. 타이프 스크립트는 크게 짖지 만 가볍게 물린다.

이 프로젝트를 시도하려면 (이를 수행하기를 바랍니다) Github 에서이 기사의 소스 코드를 찾을 수 있습니다.

위 내용은 Redux 로의 깊은 다이빙의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!