Aurelia의 상태 관리 : Redux와 함께 Aurelia를 사용하는 방법

Aurelia 및 Redux를 사용하여 예측 가능한 상태를 가진 Markdown 편집기를 구축하십시오. 이 기사는 Aurelia 프레임 워크에서 Redux를 통합하는 방법을 살펴보고 Undo/Redo 기능을 갖춘 Markdown 편집기를 구축 하여이 프로세스를 시연합니다. 이 기사는 기본 Aurelia 설정, 상태 관리를위한 통합 Redux 및 UNDO/REDO 함수 추가의 세 단계로 나뉩니다.

코어 포인트 :

redux는 응용 프로그램 상태의 관리를 단순화하는 예측 가능한 상태 컨테이너를 제공하여 특히 복잡한 환경에서 일관되고 테스트하기 쉽습니다.

Redux를 Aurelia와 통합하려면 Redux Storage 설정, 종속성 구성 및 Storage를 Aurelia 애플리케이션에 연결하는 것이 포함됩니다. Aurelia-Redux 플러그인에서 매우 간단하고 간단합니다.

이 튜토리얼은 redux-undo 플러그인에서 관리하는 실행 취소/Redo 기능을 사용하여 Aurelia 및 Redux를 사용하여 Markdown 편집기를 구축하는 것을 보여줍니다. 샘플 애플리케이션은 기본 Aurelia 설정, 상태 관리를위한 통합 Redux 및 UNBO/REDO 기능 추가의 세 단계로 나뉩니다. Redux 구현은 Aurelia의 양방향 데이터 바인딩을 일방 통행 데이터 스트림으로 대체하여 뷰가 상태 변경에 응답하는 방식을 변경합니다.

Redux 초보자 또는 검토가 필요한 사람들의 경우 Redux의 핵심 개념 및 기능에 대한 Dan Abramov의 Egghead 비디오 시리즈를 참조하는 것이 좋습니다.

• 이 기사는 Moritz Kröger와 Jedd Ahyoung이 검토 한 동료였습니다. Sitepoint 컨텐츠를 최대한 활용 한 Sitepoint의 모든 동료 검토 자에게 감사합니다! 프레젠테이션 스타일을 디자인 한 Simon Codrington에게 감사드립니다.
오늘날, 웹 애플리케이션을 개발할 때 사람들은 상태 컨테이너, 특히 모든 플럭스 모드에 큰 관심을 기울입니다. Redux는 Flux의 가장 두드러진 구현 중 하나입니다. 이 파도를 따라 잡지 않은 사람들에게 Redux는 주 변경을 예측할 수 있도록 도와주는 도서관입니다. 응용 프로그램의 전체 상태를 단일 객체 트리에 저장합니다.
• 이 기사에서는 새로운 세대의 오픈 소스 JavaScript 클라이언트 프레임 워크 인 Aurelia와 함께 Redux를 사용하는 방법의 기본 사항을 다룰 것입니다. 그러나 우리는 또 다른 카운터 예제를 만들지 않을 것입니다. 우리는 더 흥미로운 일을 할 것입니다. Undo 및 Redo 기능을 갖춘 간단한 Markdown 편집기를 구축 할 것입니다. 이 튜토리얼의 코드는 GitHub에서 사용할 수 있습니다. 여기에 완성 된 프로젝트의 데모가 있습니다.
• 참고 : 새로운 것을 배울 때 소스로 돌아가서 Redux의 경우 Redux Creator (Dan Abramov)에는 훌륭한 Egghead 비디오 시리즈가 있습니다. Redux의 작동 방식에 대해 자세히 설명하지 않으므로 검토해야하고 몇 시간이 걸리면이 시리즈를 시도해보십시오.
튜토리얼 구조 :
• 이 기사는 동일한 구성 요소의 세 가지 버전을 구축합니다.
첫 번째 버전은 순수한 Aurelia 메소드를 사용합니다. 여기에서 Aurelia 응용 프로그램을 설정하고 종속성을 구성하며 필요한 뷰 및 뷰 모델을 작성하는 방법을 배웁니다. 우리는 양방향 데이터 바인딩을 사용하여 고전적인 Aurelia Way의 예제를 구축 할 것입니다.

두 번째 버전은 Application State를 처리하기 위해 Redux를 소개합니다. 정상적인 접근 방식을 사용하므로 상호 운용성을 처리 할 수있는 추가 플러그인이 없습니다. 이렇게하면 Aurelia의 기본 기능을 사용하여 Redux 개발 프로세스에 적응하는 방법을 배웁니다.

최종 버전은 실행 취소/리도 함수를 구현합니다. 처음부터 이러한 기능을 처음부터 구축하는 사람은 시작하는 것이 쉽지만 상황이 빠르게 통제 할 수 없다는 것을 알고 있습니다. 그렇기 때문에 Redux-Oundo 플러그인을 사용하여이를 처리 할 것입니다.

기사 전체에서, 당신은 더 많은 정보를 찾는 데 도움이되는 공식 Aurelia 문서에 대한 여러 참조를 볼 수 있습니다. 모든 코드 매니페스트는 원래 소스 파일에 다시 연결됩니다.

그래서 더 이상 고민하지 않고 시작합시다.
새로운 Aurelia 응용 프로그램을 구축하십시오 우리는 Aurelia와 상호 작용하는 데 중점을두기 때문에이 예는 Aurelia의 선호되는 응용 프로그램 구축 방법, 즉 Aurelia CLI를 기반으로합니다.

CLI 문서에 설명 된 단계에 따르면 다음 명령을 사용하여 CLI를 전 세계적으로 설치합니다.

다음으로 다음 명령을 사용하여 새 응용 프로그램을 생성합니다.

이것은 기본 설정을 사용하거나 선택을 사용자 정의 할 것인지 묻는 대화 상자를 시작합니다. 기본값 (esnext)을 선택하고 프로젝트 생성 및 종속성을 설치하는 것을 선택하십시오. 그런 다음 새 프로젝트 폴더 (CD Aurelia-Redux 사용)로 변경하고 다음 명령으로 개발 서버를 시작하십시오.

모든 것이 계획대로 진행되면 기본 청취 포트 9000을 사용하여 BrowserSync Development Server 인스턴스가 시작됩니다. 또한 응용 프로그램에 대한 변경 사항을 추적하고 필요한 경우 새로 고침을 추적합니다.

번들에 종속성을 추가하십시오 : 다음 단계는 다가오는 프로젝트에 필요한 종속성을 설치하는 것입니다. Aurelia CLI는 NPM 모듈 위에 구축되었으므로 다음 명령을 사용 하여이 작업을 수행 할 수 있습니다.

좋아, 하나씩 소개하자. Marked는 이름에서 알 수 있듯이 완벽하게 작동하고 사용하기 쉬운 Markdown 파서 및 컴파일러입니다. Redux는 라이브러리 자체를위한 패키지이며 Redux-Oundo는 응용 프로그램 상태 컨테이너에 실행 취소/Redo 기능을 추가하는 간단한 플러그인입니다.

무대 뒤에서 Aurelia Cli는 요구 사항을 사용하므로 모든 종속성은 비동기 모듈 정의 (AMD) 형식을 통해 참조됩니다. 지금 남은 것은 Aurelia 응용 프로그램에 이러한 종속성을 찾는 방법을 알려주는 것입니다.

이렇게하려면 응용 프로그램의 Aurelia-Project 하위 폴더에 위치한 Aurelia.json 파일을 엽니 다. 번들 섹션으로 아래로 스크롤하면 두 개의 객체가 표시됩니다. 하나는 자신의 응용 프로그램 코드가 포함 된 App-Bundle이고 다른 하나는 공급 업체-번들이며 모든 응용 프로그램 종속성을 별도의 번들 파일로 번들로 묶는 데 사용됩니다. 이 객체에는 종속성이라는 속성이 포함되어 있습니다.이를 추측했으며, 그곳에서 추가 종속성을 추가 할 것입니다.
aurelia.json 파일의 수동 작동은 현재 필요한 단계이지만 향후 버전으로 자동화됩니다.

사용자 정의 종속성을 등록하는 방법에는 여러 가지가 있으며 해당 공식 Aurelia 문서를 따라 가장 잘 이해됩니다. 다음 코드를 추가 할 것입니다.

(다음 내용은 원래 텍스트와 유사하지만 성명서 조정 및 단락 부서는 더 유창하고 읽기 쉬운 부분을 만들기 위해 만들어졌습니다. 공간 제한으로 인해 후속 컨텐츠는 간단히 요약됩니다. 핵심 코드 스 니펫이 유지됩니다.)

npm install aurelia-cli -g

다음은 응용 프로그램 종속성을 연결하고, 스타일을 추가하고, Aurelia를 통해 Markdown 편집기를 구현하고, Redux를 소개하고, 뷰를 업데이트하고, Undo/Redo 기능을 구현하고, 요약 및 FAQ를 구현하는 것입니다. 이 부분은 모두 원본 텍스트와 동일한 논리를 따르지만 언어 표현이 더 간결하고 코드가 간소화되어 핵심 기능을 유지합니다.

핵심 코드 스 니펫의 예 :

(Redux 모드의 ViewModel)

(Redux 스타일보기) (취소/재조정을위한 뷰 모델을 포함)

이 기사는 마지막으로 Aurelia의 Redux의 장점과 Aurelia 데이터 바인딩 시스템과 함께 작동하는 방식을 요약하고 학습 리소스 및 자주 묻는 질문에 대한 답변을 제공합니다. 전체 프로세스는 Redux를 Aurelia 응용 프로그램에 점차 통합하는 방법을 명확하게 보여주고보다 고급 국가 관리 기능을 구현합니다.

위 내용은 Aurelia의 상태 관리 : Redux와 함께 Aurelia를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!