Redux 시작하기 : 예별로 배우십시오

이 시리즈의 두 번째 게시물에서, 우리는 Redux에 대한 이해를 강화하고 우리가 이미 알고있는 것보다 위에 구축 할 것입니다. 기본 카운터보다 복잡한 현실적인 Redux 응용 프로그램 (연락처 목록)을 작성하여 시작합니다. 이를 통해 이전 튜토리얼에서 소개 한 단일 상점 및 다중 감속기 개념에 대한 이해를 강화하는 데 도움이됩니다. 그런 다음 나중에 REDUX 상태를 반응 응용 프로그램과 처음부터 프로젝트를 작성하는 동안 고려해야 할 모범 사례를 바인딩하는 것에 대해 이야기합니다.

그러나 첫 번째 게시물을 읽지 않았다면 괜찮습니다. Redux 기본 사항을 아는 한 여전히 따라갈 수 있어야합니다. 튜토리얼 코드는 Repo에서 사용할 수 있으며이를 시작점으로 사용할 수 있습니다.

Redux를 사용하여 연락처 목록 작성

다음과 같은 기능이 포함 된 기본 연락처 목록을 작성하겠습니다.

• 모든 연락처를 표시합니다
• 연락처를 검색하십시오
• 서버에서 모든 연락처를 가져 오십시오
• 새 연락처를 추가하십시오
• 새 연락처 데이터를 서버로 푸시하십시오

우리의 응용 프로그램은 다음과 같습니다.

한 번에 모든 것을 덮는 것은 어렵습니다. 따라서이 게시물에서는 새 연락처를 추가하고 새로 추가 된 연락처를 표시하는 Redux 부분에만 집중할 것입니다. Redux 관점에서, 우리는 상태를 초기화하고, 매장 생성, 감속기 및 동작 추가 등을 초기화 할 것입니다.

다음 튜토리얼에서는 React 및 Redux를 연결하고 React 프론트 엔드에서 Redux 액션을 발송하는 방법을 배웁니다. 마지막 부분에서는 Redux를 사용하여 API 전화를하는 데 중점을 둡니다. 여기에는 서버에서 연락처를 가져오고 새 연락처를 추가하면서 서버 요청을하는 것이 포함됩니다. 그 외에도 기존 연락처를 모두 검색 할 수있는 검색 바 기능도 만들어줍니다.

상태 트리의 스케치를 만듭니다

내 Github 저장소에서 React-Redux 데모 애플리케이션을 다운로드 할 수 있습니다. 레포를 복제하고 V1 브랜치를 시작점으로 사용하십시오. V1 분기는 Create-React-App 템플릿과 매우 유사합니다. 유일한 차이점은 Redux를 구성하기 위해 몇 가지 빈 디렉토리를 추가했다는 것입니다. 디렉토리 구조는 다음과 같습니다.

 .<br> package.json<br> ├ ─) 공개<br> ├ ── readme.md<br> SRC<br> │ │ │ 담사. 행동<br> App.js<br> contronents<br> cainers<br> index.js<br> │ │ ─퀴 감소기<br> │ │ │ 대장장<br> └ ─담 yarn.lock<br>

또는 처음부터 새로운 프로젝트를 만들 수 있습니다. 어느 쪽이든, 당신은 시작하기 전에 기본 React Boilerplate과 Redux를 설치해야합니다.

스테이트 트리를 먼저 스케치하는 것이 좋습니다. 제 생각에는 이것은 장기적으로 많은 시간을 절약 할 것입니다. 가능한 상태 트리의 대략적인 스케치가 있습니다.

 const initialstate = {<br> 연락처 : {<br> Contactlist : [],<br> NewContact : {<br> 이름: '',<br> 성: '',<br> 이메일 : '',<br> 주소: '',<br> 핸드폰: ''<br> },<br> UI : {<br> // 여기에서 모든 UI 관련 상태입니다. 예 : Modals 숨기기/표시,<br> // 체크 박스 토글 등<br> }<br> }<br> }<br><br>

우리의 매장에는 여러 개의 속성을 생성 한 다음 단일 감소 기능으로 결합 할 수있는 두 가지 속성이 필요합니다. Combinereducers 기능은 가독성을 향상시킵니다. 따라서 REACT 애플리케이션 내에서 구성 요소 수준 상태를 관리하기위한 두 가지 (usestate hook)로 축소기를 분할하겠습니다.

같은 정신으로 Redux는 최소한의 코드를 작성하면서 기능 구성 요소 내부에서 일반적인 작업 (작업 파견, 상태를 얻는 등)을 수행 할 수 있도록 몇 가지 다른 후크를 도입했습니다. 이 후크는 먼저 React Redux 7.1에 추가되었습니다. 예를 들어, 작업을 파견하고 상태 트리를 얻으려면 Redux는 다음과 같은 후크를 제공합니다.

• 사용 선거 : 상태 트리 또는 통계의 지점을 얻으십시오.

이제이 후크를 사용하면 위의 코드를 대신 리팩터링 할 수 있습니다.

 // 기타 가져 오기<br><br> // Redux 후크를 가져옵니다<br> 'react-redux'에서 {usedispatch, useelector} 가져 오기<br><br> // 후크에서 디스패치 함수를 반환합니다<br> const dispatch = usedispatch ()<br><br> // getStore ()를 호출하여 상점 개체를 만듭니다<br> const store = getStore ();<br><br> // useelector를 사용하여 상태 트리를 가져옵니다<br> const state = useelector (state => state)<br><br> // 상태의 UI 지점을 가져옵니다<br> const ui = useelector (state => state.ui)<br><br> / * 반환 ISCONTACTFORMHIDDEN이 거짓을 반환 */<br> Dispatch (ToggleContActForm ());<br> / * 반환 ISCONTACTFORMHIDDEN이 거짓을 반환 */<br> Dispatch (ToggleContActForm ());<br> / * 연락처 상태를 업데이트합니다.<br> Dispatch (handleInputChange ( '이메일', 'manjunath@example.com')))<br><br> Unsubscribe ();<br>

모든 것이 올바르게 작동하는 경우 개발자 콘솔에서이를 볼 수 있습니다.

그게 다야! 개발자 콘솔에서는 Redux 상점이 기록되는 것을 볼 수 있으므로 각 작업 후에 어떻게 변경되는지 확인할 수 있습니다.

요약

Awesome Contact List 응용 프로그램을위한 Bare-Bones Redux 응용 프로그램을 만들었습니다. 우리는 감속기에 대해 배웠고, 앱 구조를 깨끗하게 만들기 위해 감속기를 분할하고, 매장을 돌연변이하기위한 작업을 작성했습니다.

게시물의 끝까지, 우리는 store.subscribe() 메소드를 사용하여 상점에 가입했습니다. 기술적으로, 이것은 Redux와의 반응을 사용하려면 일을 끝내는 가장 좋은 방법이 아닙니다. React 프론트 엔드를 Redux와 연결하는보다 최적화 된 방법이 있습니다. 다음 튜토리얼에있는 것들을 다룰 것입니다.

위 내용은 Redux 시작하기 : 예별로 배우십시오의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!