고급 ReactJS : React + Redux + Sagas 모범 사례

생각을위한 커피

먼저, React가 무엇인지에 대한 간단한 소개입니다. 사용자 인터페이스를 구축하는 데 사용되는 JavaScript 라이브러리입니다. 프론트 엔드 개발 환경은 그 이후로 바뀌 었습니다. 따라서 React 나 Vue.js와 같은 프론트 엔드 웹 개발자 학습 라이브러리가 되고자한다면 오늘날 업계에서 거의 필수적입니다. 다음은 React를 배우기 시작한 경우 유용한 자습서입니다. https://reactjs.org/tutorial/tutorial.html.

React를 배우기 시작했을 때를 기억합니다. 나는 항상 내가 필요로하는 모든 것을 배울 수 없다는 불안감을 느꼈다. 끊임없이 변화하는 JavaScript 언어가 머릿속에 떠올랐다. 그것을하기 위해? 말 그대로 수백 개의 온라인 자습서, 유튜브 검색 및 미완성 (그리고 대부분 씻지 않은) 커피 잔을 마친 후 마침내 React가 JavaScript 테이블로 가져 오려는 내용을 확실하게 파악했습니다.

그러나 나는 항상 React의 모든 고급 개념을 하나의 간단한 자습서로 묶는 자습서를 찾기 위해 고심하고 있습니다.

또한 이러한 개념이 큰 소스 코드 내에서 사용될 때 이러한 개념을 이해하는 데 어려움을 겪었던 것을 기억합니다. 그것이이 기사가 채우려 고하는 격차입니다. 고급 도구 및 개념은 간단한 앱에 포함되어 있으며 이는 단지 자습서 목적으로 만 사용되며 앱에서 필요하지 않은 경우 이러한 개념을 사용해서는 안됩니다.

잡담으로 충분합니다. 코드를 이야기 해 봅시다. 이 리포지토리에서 완성 된 코드를 다운로드하고 README를 따라 가면 여기에서 구축 할 내용을보고 느낄 수 있습니다. https://github.com/jelorivera08/react-starter-pack.

앱의 방문 페이지

위에서 카운트 상태가 표시되고 각각의 동작을 트리거하는 4 개의 버튼이 표시됩니다. 그들의 행동은 자명하다.

선택기

카운터 컨테이너 내부의 selectors.js 파일로 이동하십시오. 여기서 다루는 첫 번째 고급 개념은 createSelector입니다. 먼저 코드를 살펴보면 const count 변수는 state.get (‘count’)를 사용하여 redux 상태 트리에서 카운트 상태를 가져옵니다.

그런 다음 상기 방법을 사용하여 선택기를 만듭니다. 이를 통해 redux 상태 트리에서 수신 한 상태 / 데이터의 형식을 지정하는 데 도움이되며,이를 통해 전면에서 무언가를 렌더링 할 때마다 상태를 재구성하거나 대상 상태를 형식화하는 새로운 함수를 코딩하는 데 많은 시간을 절약 할 수 있습니다. -종료. 이 예에서는받은 상태를 변경하지 않았습니다. 데모 목적으로 일반 상태로 돌아 왔습니다.

그런 다음 결과 함수는 mapStateToProps 내에서 사용되며 mapStateToProps와 함께 자연스럽게 다음으로 구성해야 할 것은 mapDispatchToProps입니다.

행동을 창조하다

리듀서 액션을 디스패치 할 때마다 애플리케이션 상태를 변경하기 위해 나중에 입력 할 리듀서에 타입과 해당 스위치 케이스를 선언해야합니다. reduxsauce의 createActions 패키지를 사용하면 하나의 돌로 두 마리의 새를 칠 수 있습니다. 또한이 패키지를 최대한 활용하려면 리듀서를 reduxsauce로 포맷해야합니다.

감속기

위는 앱의 감속기입니다. 초기 상태는 fromJS API에 의해 변경 불가능하며 패키지 이름이 적용되면 초기 상태가 변경되지 않도록 보호합니다. 이 개념에서는 반응이 매우 엄격하므로 항상 명심하십시오. reduxsauce의 createReducer API에는 두 개의 인수가 있습니다.

먼저 초기 상태입니다. 둘째, 유형이 디스패치 호출과 일치하면 감속기가 실행하는 함수로서 조치 유형 및 값에 대한 키가있는 오브젝트입니다. 그런 다음 병합하면 그에 따라 redux 상태 트리가 변경됩니다. 비동기 API 호출을 올바르게 처리하는 방법을 모르는 실제 앱이 없습니까? 권리.

Redux Saga

다음은 우리 프로그램의 사가 부분입니다. 우리가 행동이라고 부르는 방식을 제외하고는 모든 것이 동일합니다. 우리는 앞서 만든 유형 작업을 사용하고 나중에 다시 redux 상태 트리에 영향을 미치는 비동기 호출을 발송하기 위해 watcher saga 내에서이를 사용합니다.

앱의 비동기 느낌을 훨씬 더 좋게하기 위해 네트워크 대기 시간을 조롱하기위한 지연이 있습니다. 마지막으로 성능에 대해 잊지 않도록하십시오.

코드 분할

코드 분할은 웹 응용 프로그램 성능을 향상시키는 좋은 방법입니다. 자바 스크립트 코드는 사용자 데이터에 가장 큰 영향을 미칩니다. 따라서 코드 분할을 통해 최종 사용자는 데이터 소비 효율성에 필요한 코드의 일부만 다운로드 할 수 있습니다.

결론적으로,

소프트웨어 엔지니어가보다 깔끔하고 효율적인 코드를 만들 수 있도록 도와주는 많은 패키지와 도구가 있습니다. 비용, 기본 시스템을 이해하는 비용 및 React에서 생각하는 비용이 함께 제공됩니다.

Learning React는 코딩 패러다임을 프론트 엔드의 이전 코딩 사고 방식에 비해 훨씬 다른 것으로 전환해야합니다. 이 기사에서 논의한 도구와 패키지는 React에서 아름답고 효율적으로 코딩하는 데 필요한 원칙을 요약하여 탁월한 개발자를 만듭니다.

항상 작은 것입니다.

이를 통해이 작은 기사를 통해 React에 대한 이해를 돕기 위해 도움을 주셨기를 바랍니다. 건배!