분류 Reactjs

고급 Redux 스타터 키트 튜토리얼

컨텐츠 정보

  • 조회 309 (작성일 )

본문

중급 튜토리얼에서는 일반적인 기본 React 앱에서 Redux Starter Kit를 사용하는 방법과 RSK를 대신 사용하기 위해 기존의 일반 Redux 코드를 변환하는 방법을 살펴 보았습니다. 

또한 감속기 함수에서 "돌연변이"불변 업데이트를 작성하는 방법과 동작 페이로드를 생성하기 위해 "준비 콜백"을 작성하는 방법을 보았습니다.


https://redux-starter-kit.js.org/tutorials/advanced-tutorial 


이 튜토리얼에서는 할일 목록 예제보다 더 큰 "실제"앱의 일부로 Redux Starter Kit를 사용하는 방법을 설명합니다. 

이 튜토리얼에서는 몇 가지 개념을 보여줍니다.

  • Redux를 사용하도록 "일반 React"앱을 변환하는 방법
  • 데이터 가져 오기와 같은 비동기 논리가 RSK에 적합한 방법
  • TypeScript에서 RSK를 사용하는 방법

이 과정에서 코드를 개선하는 데 사용할 수 있는 TypeScript 기술의 몇 가지 예를 살펴보고 기존 연결 API 대신 새로운 React-Redux 후크 API를 사용하는 방법을 살펴 봅니다.


참고 :이 문서는 일반적으로 TypeScript를 사용하는 방법이나 Redux를 구체적으로 사용하는 방법에 대한 완전한 자습서가 아니며 여기에 표시된 예제는 100 % 완전한 유형 안전을 달성하려고 하지 않습니다. 

자세한 내용은 React TypeScript Cheatsheet 및 React / Redux TypeScript Guide와 같은 커뮤니티 리소스를 참조하십시오.

또한 이 튜토리얼에서는 React 앱 로직을 Redux로 완전히 변환해야 한다는 의미는 아닙니다. React 컴포넌트에 어떤 상태를 사용해야 하는지, 그리고 Redux에 무엇이 있어야 하는지 결정하는 것은 사용자의 책임입니다. 이것은 원하는 경우 논리를 Redux를 사용하도록 변환하는 방법의 예일 뿐입니다. 


이 튜토리얼에서 변환 된 응용 프로그램의 전체 소스 코드는 github.com/markerikson/rsk-github-issues-example에서 확인할 수 있습니다. 이 리포지토리의 역사에 표시된 대로 변환 과정을 안내합니다. 의미 있는 개별 커밋에 대한 링크는 다음과 같이 따옴표 블록으로 강조 표시됩니다.