Redux 이해 : Redux를 시작하기위한 세계에서 가장 쉬운 안내서

이 안내서는 절대 Redux 초보자 또는 기본 Redux 개념에 대한 이해를 재평가하고자하는 모든 사용자를위한 포괄적 인 (그러나 단순화 된) 안내서입니다.

확장 된 목차를 보려면이 링크를 방문하십시오. 고급 Redux 개념에 대해서는 Redux 서적을 확인하십시오.

소개

이 기사 (실제로는 책)는 Redux를 익히는 방법을 오랫동안 검색 해본 경우 빠진 기사입니다.

시작하기 전에이 책이 가장 중요하다는 것을 말씀 드리겠습니다. 네 Redux를 배우고 더 나은 교육 방법을 찾는 데 어려움을 겪고 있습니다.

몇 년 전에 방금 React를 배웠습니다. 나는 그것에 대해 흥분했지만, 다른 모든 사람들은 Redux라는 다른 것에 대해 이야기하는 것처럼 보였습니다.

어이! 학습 행진이 끝나는가?

엔지니어가 개인 개발에 전념하면서 저는 알고 싶어했습니다. 나는 배제하고 싶지 않았다. 그래서 저는 Redux를 배우기 시작했습니다.

Redux 설명서를 확인했습니다. 실제로 꽤 좋았습니다! 어떤 이유로 든, 그것은 나를 위해 완전히 클릭하지 않았습니다. YouTube 동영상도 많이 확인했습니다. 내가 찾은 것은 서두르고 상세하지 않은 것처럼 보였습니다. 가난한 날.

솔직히, 내가 본 비디오 튜토리얼이 나쁘지 않다고 생각합니다. 뭔가 빠진 것이있었습니다. 상상의 인간형이 아닌 나와 같은 제정신이있는 사람을 위해 잘 생각되고 쓰여진 쉬운 안내서.

내가 혼자가 아닌 것처럼 보였다.

저의 좋은 친구, 제가 당시 멘토링을하고 있던 누군가가 React Developer Certification 과정을 마치고 인증서를 얻기 위해 $ 300 이상을 지불했습니다.

프로그램에 대한 솔직한 피드백을 요청했을 때, 그의 말은 다음과 같이 진행되었습니다.

과정은 꽤 좋았지 만 여전히 Redux가 나와 같은 초보자에게 잘 설명되지 않았다고 생각합니다. 잘 설명되지 않았습니다.

알다시피, Redux를 이해하기 위해 고군분투하고있는 친구가 더 많습니다. 그들은 아마도 Redux를 사용하지만 그것이 어떻게 작동하는지 진정으로 말할 수는 없습니다.

나는 해결책을 찾기로 결심했다. 나는 Redux를 깊이 이해하고 그것을 가르치는 더 명확한 방법을 찾으려고했습니다.

당신이 읽으려고하는 것은 수개월의 연구가 필요했고, 그런 다음 매일 프로젝트와 다른 심각한 약속을 지키면서 예제 프로젝트를 작성하고 구축하는 데 더 많은 시간이 걸렸습니다.

그러나 당신은 무엇을 알고 있습니까?

이 소식을 알려 드리게되어 기쁩니다.

당신의 머리 위로 말하지 않을 Redux 가이드를 검색했다면, 이것이 바로 그것입니다. 더 이상 보지 마십시오.

나는 나의 고투와 내가 아는 많은 다른 사람들의 투쟁을 고려했다. 중요한 내용을 알려 드리고 혼란을주지 않으면 서 알려 드리겠습니다.

이제 약속입니다.

Redux를 가르치는 나의 접근법

Redux를 가르치는 데있어 (특히 초보자에게) 실제 문제는 Redux 라이브러리 자체의 복잡성이 아닙니다.

아뇨, 그런 것 같아요 종속성을 포함하여 작은 2kb 라이브러리입니다.

Redux 커뮤니티를 초보자로 살펴보면 마음을 빨리 잃을 것입니다. Redux뿐만 아니라 실제 앱을 구축하는 데 필요한 다른 "관련 라이브러리"가 많이 있습니다.

약간의 연구를하면서 시간을 보냈다면 이미 그들과 만난 것입니다. Redux, React-Redux, Redux-thunk, Redux-saga, Redux-promise, Reselect, Recompose 등이 있습니다!

충분하지 않은 것처럼 라우팅, 인증, 서버 측 렌더링, 테스트 및 번들링도 한 번에 적용됩니다.

어이! 압도적입니다.

“Redux 튜토리얼”은 종종 Redux에 관한 것이 아니라 그와 함께 제공되는 다른 모든 것입니다.

초보자를 위해보다 정교하게 접근해야합니다. 휴머노이드 개발자라면 분명히 이것에 문제가 없을 것입니다. 맞춰봐? 우리 대부분은 실제로 인간입니다.

Redux를 가르치는 방법은 다음과 같습니다.

약간의 추가 사항을 잊어 버리고 Redux를 수행하십시오. 네!

나는 지금 당신이 필요로하는 최소한의 것을 소개 할 것입니다. React-router, Redux-form, Reselect, Ajax, Webpack, Authentication, Testing 등은 없습니다.

그리고 무엇을 추측합니까? 그것이 당신이 가진 중요한 삶의 일부 기술을 배우는 방법입니다.

걷는 법을 어떻게 배웠습니까?

하루 만에 달리기 시작 했습니까? 아니!

번거 로움없이 Redux를 배우기위한 깔끔한 방법을 안내해 드리겠습니다.

꽉 앉아

"일어나기 조수가 모든 보트를 들어 올립니다"

Redux의 기본 작동 방식에 대한 정보를 얻었을 때 (상승 조수) 다른 모든 것을 추론하기가 더 쉬워집니다 (모든 보트를 들어 올립니다).

Redux의 학습 곡선에 대한 참고 사항

에릭 엘리엇 (Eric Elliot)의 레 독스 (Leux)의 윤곡 곡선에 대한 트윗.

Redux에는 학습 곡선이 있습니다. 나는 달리 말하고 있지 않다.

걷기 학습에도 학습 곡선이있었습니다. 그러나 학습에 대한 체계적인 접근 방식으로이를 극복했습니다.

몇 번 넘어졌지만 괜찮습니다. 누군가가 항상 당신을 붙잡고 발을 잡을 수 있도록 도와주었습니다.

글쎄요, 당신이 나와 함께 Redux를 배우면서 당신을 위해 그 사람이되기를 바라고 있습니다.

무엇을 배울 것인가

모든 말을 마치고 나면 Redux가 외부에서 보이는 것처럼 무섭지 않다는 것을 알게 될 것입니다.

기본 원칙은 너무나 쉽습니다!

먼저, Redux의 기본 사항을 명확하고 접근하기 쉬운 언어로 가르칩니다.

그런 다음 몇 가지 간단한 응용 프로그램을 작성합니다. 기본 Hello World 앱으로 시작합니다.

기본적인 Hello World Redux 애플리케이션.

그러나 이것으로는 충분하지 않습니다.

연습해야 할 문제와 문제도 포함시킬 것입니다.

우리가 함께 할 샘플 운동 앱.

효과적인 학습은 단순히 읽고 듣는 것이 아닙니다. 효과적인 학습은 대부분 연습에 관한 것입니다!

이것들을 숙제라고 생각하십시오. 그러나 화난 선생님은 없습니다. 연습을하는 동안 해시 태그 #UnderstandingRedux로 트윗을하시면됩니다.

화난 선생님이 없습니까?

연습은 좋지만 더 큰 응용 프로그램을 구축하는 것을 지켜봐야합니다. 이곳은 Skype 클론과 같은 달콤한 메시징 앱인 Skypey를 구축하여 모든 것을 마무리합니다.

Skypey : 함께 구축 할 Skype 복제품입니다.

Skypey에는 메시지 편집, 메시지 삭제 및 여러 연락처로 메시지 보내기와 같은 기능이 있습니다.

만세!

그래도 흥분되지 않는다면 어떻게 될지 모르겠습니다. 이걸 보여줘서 정말 기뻐요!

Jona Dinges의 Gif

전제 조건

유일한 전제 조건은 이미 React를 알고 있다는 것입니다. 그렇지 않은 경우, Dave Ceddia의 Pure React는 $$가 부족할 경우 개인적 권장 사항입니다. 저는 제휴사가 아닙니다. 좋은 자료 일뿐입니다.

오프라인 읽기 용 PDF 및 Epub 다운로드

아래 비디오는 PDF 및 Epub 버전의 책을 얻는 과정을 보여줍니다.

요점은 다음과 같습니다.

  1. 도서 판매 페이지를 방문하십시오.
  2. FREECODECAMP 쿠폰을 사용하여 가격을 100 % 할인하여 $ 29에 $ 29 책을 받으십시오.
  3. 감사의 말을하려면이 기사를 추천하십시오. 중간 박수 아이콘을 클릭 한 상태로 유지하십시오. +50.

이제 시작하겠습니다.

1 장 : Redux에 대해 알아보기

몇 년 전, 프론트 엔드 애플리케이션 개발은 많은 사람들에게 농담처럼 보였습니다. 요즘에는 적절한 프론트 엔드 응용 프로그램을 구축하는 과정이 점점 복잡해지고 있습니다.

끊임없이 요구되는 사용자의 긴급한 요구 사항을 충족시키기 위해 온화한 귀여운 고양이가 집의 경계를 넘어 자랐습니다. 3 인치 발톱과 사람의 머리에 맞도록 충분히 넓게 열리는 입으로 두려움이없는 사자가되었습니다.

예, 오늘날 현대적인 프론트 엔드 개발은 그런 느낌입니다.

Angular, React 및 Vue와 같은 최신 프레임 워크는이 "짐승"을 길들이는 데 큰 역할을했습니다. 마찬가지로, Redux에 의해 시행되는 것과 같은 현대 철학도이“짐승”에게 냉기 약을 제공하기 위해 존재합니다.

이러한 철학을 살펴보면서 따라 해보십시오.

Redux 란 무엇입니까?

Redux 란 무엇입니까? Redux 설명서에서 볼 수 있듯이

Redux의 공식 문서는 다음과 같습니다.

Redux는 JavaScript 앱을위한 예측 가능한 상태 컨테이너입니다.

그 9 개의 단어는 내가 처음 읽을 때 90 개의 불완전한 문구처럼 느껴졌습니다. 나는 그것을 얻지 못했습니다. 당신도 그렇지 않을 것입니다.

땀 흘리지 마 조금 더 살펴보고 Redux를 더 많이 사용할수록 그 문장이 더 명확 해집니다.

밝은면에서 문서를 조금 더 읽으면 어딘가에 더 많은 설명이 있습니다.

읽는다 :

일관되게 동작하는 응용 프로그램을 작성하는 데 도움이됩니다…

그거 보여요?

평신도의 말에 따르면,“짐승을 길들이는 데 도움이됩니다.” 은유 적으로.

Redux는 대규모 애플리케이션에서 상태 관리에 직면 한 번거 로움을 없애줍니다. 훌륭한 개발자 경험을 제공하며 앱의 테스트 가능성이 그 어느 것도 희생되지 않도록합니다.

React 애플리케이션을 개발할 때 모든 상태를 최상위 컴포넌트로 유지하는 것만으로는 더 이상 충분하지 않을 수 있습니다.

시간이 지남에 따라 응용 프로그램에서 많은 데이터가 변경 될 수 있습니다.

Redux는 이러한 종류의 문제를 해결하는 데 도움이됩니다. 유일하게 해결책은 아닙니다.

왜 Redux를 사용합니까?

이미 알고 있듯이“왜 B보다 A를 사용해야합니까?”와 같은 질문은 개인적인 취향으로 요약됩니다.

프로덕션에서 Redux를 사용하지 않는 앱을 ​​만들었습니다. 많은 사람들이 같은 일을했다고 확신합니다.

저에게는 팀원들에게 복잡한 계층을 도입하는 것에 대해 걱정했습니다. 궁금한 점이 있다면 결정을 후회하지 않습니다.

Redux의 저자 인 Dan Abamov는 애플리케이션에 너무 일찍 Redux를 도입 할 위험에 대해 경고합니다. 당신은 Redux를 좋아하지 않을 수도 있습니다. 나는 친구가 없다.

그러나 Redux를 배우는 데는 여전히 꽤 좋은 이유가 있습니다.

예를 들어, 움직이는 부분이 많은 큰 앱에서는 상태 관리가 큰 관심사가됩니다. Redux는 성능 문제 나 테스트 가능성과의 거래 없이도이를 잘 평가합니다.

많은 개발자가 Redux를 좋아하는 또 다른 이유는 함께 제공되는 개발자 경험입니다. 다른 많은 도구들도 비슷한 일을 시작했지만 Redux에게는 큰 기여를했습니다.

Redux를 사용하면 얻을 수있는 몇 가지 좋은 점은 로깅, 핫 리로딩, 시간 여행, 유니버설 앱, 기록 및 재생 등 개발자가 직접 수행하지 않아도됩니다. 이러한 것들은 당신이 그것들을 사용하고 스스로 볼 때까지 환상적으로 들릴 것입니다.

Time Travel을 사용한 Hot Reloading이라는 Dan의 강연은 이러한 작동 방식을 잘 이해하게 해줍니다.

또한 Redux의 유지 관리 담당자 중 하나 인 Mark Ericsson은 프로덕션의 React 앱 중 60 % 이상이 Redux를 사용한다고 말합니다. 많이입니다!

결과적으로 이것은 내 생각에 불과합니다. 많은 엔지니어들이 잠재적 인 고용주에게 React와 Redux에 내장 된 더 큰 생산 코드베이스를 유지할 수 있다는 것을 보여주기 위해 Redux를 배웁니다.

Redux를 사용해야 할 이유를 더 원한다면 Redux 제작자 인 Dan은 Medium에 대한 그의 기사에서 몇 가지 이유를 더 강조했습니다.

본인이 선임 엔지니어라고 생각하지 않는 경우 Redux를 배우는 것이 좋습니다. 주로 그 원리에 따라 다릅니다. 일반적인 작업을 수행하는 새로운 방법을 배우게되므로 더 나은 엔지니어가 될 수 있습니다.

사람들마다 다른 기술을 선택해야하는 다른 이유가 있습니다. 결국 전화는 당신의 것입니다. 그러나 기술 세트에 Redux를 추가하는 것은 확실히 아프지 않습니다.

Redux를 5 세로 설명

이 부분은 정말 중요합니다. 여기에 대한 설명은 책을 통해 참조됩니다. 준비하십시오.

5 살짜리 아이에게는 기술 전문 용어를 사용할 시간이 없기 때문에, 나는 이것을 매우 간단하지만 Redux 학습 목적과 관련이 있습니다.

자, 우리는 간다!

은행에 현금을 인출하기 위해 익숙한 이벤트를 생각해 봅시다. 이 작업을 자주하지 않더라도 프로세스의 모양을 알고있을 것입니다.

영 조는 은행으로 향합니다.

어느 날 아침에 일어나서 가능한 한 빨리 은행으로 향합니다. 은행에가는 동안 WITHDRAW_MONEY에 대한 하나의 의도 / 행동 만 명심해야합니다.

은행에서 돈을 인출하려고합니다.

영 조는 돈을 인출하려는 의도로 은행으로 향합니다.

흥미로운 일이 있습니다.

은행에 들어 오면 계산원에게 바로 가서 요청을 알립니다.

영 조가 은행에있다! 그는 계산원을 보려고 곧장 가서 그의 요청을 알립니다.

잠깐, 캐셔에 갔었 어?

왜 돈을 얻기 위해 은행 금고에 가지 않았습니까?

Young Joe 만 Vault에 들어간 경우 그는 찾은만큼 손수레로 옮길 것입니다.

결국, 그것은 당신의 열심히 번 돈입니다.

이미 알고 있듯이 일이 그렇게되지 않습니다. 그렇습니다. 은행에는 금고에 돈이 있지만 계산원과 상담하여 자신의 돈을 인출하기위한 적법한 절차를 따르도록 도와야합니다.

그런 다음 컴퓨터에서 계산원이 몇 가지 명령을 입력하고 현금을 귀하에게 전달합니다. 쉬워요.

돈을 버는 방법은 다음과 같습니다. Vault가 아니라 죄송합니다.

이제 Redux는이 이야기에 어떻게 맞습니까?

곧 자세한 내용을 살펴 보 겠지만 먼저 용어를 설명하겠습니다.

1. Bank Vault는 Redux Store가 Redux 인 은행에 있습니다.

은행 금고는 Redux Store에 비유 할 수 있습니다!

은행 금고는 돈을 은행에 보관합니다.

응용 프로그램 내에서 돈을 쓰지 않습니다. 대신, 신청 상태는 지출 한 돈과 같습니다. 응용 프로그램의 전체 사용자 인터페이스는 해당 상태의 기능입니다.

은행 금고가 은행에서 돈을 안전하게 지키는 것처럼 응용 프로그램의 상태는 상점이라고하는 것에 의해 안전하게 유지됩니다. 따라서 상점은 "돈"또는 주를 그대로 유지합니다.

어, 이것을 기억해야합니다. 알 겠지요?

Redux Store는 Bank Vault에 비유 할 수 있습니다. 애플리케이션의 상태를 유지하고 안전하게 유지합니다.

이것은 첫 번째 Redux 원칙으로 이어집니다.

단일 소스를 확보하십시오. 전체 애플리케이션의 상태는 단일 Redux 스토어 내의 오브젝트 트리에 저장됩니다.

말로 혼동하지 마십시오.

간단히 말해, Redux를 사용하면 Redux 저장소에서 관리하는 단일 개체에 응용 프로그램 상태를 저장하는 것이 좋습니다. 그것은 은행 홀 어디에서나 돈을 버는 것에 반대하는 하나의 금고를 갖는 것과 같습니다.

최초의 Redux Princple

2. 행동을 염두에두고 은행에 가십시오.

은행에서 돈을 받으려면 돈을 인출하기 위해 어떤 의도 나 조치를 취해야합니다.

은행에 들어가서 돌아 다니면 아무도 돈을주지 않을 것입니다. 당신은 심지어 보안에 의해 던져 질 수 있습니다. 슬픈 것들.

Redux에 대해서도 마찬가지입니다.

원하는만큼 코드를 작성하지만 Reux의 setState를 사용하는 것처럼 Redux 애플리케이션의 상태를 업데이트하려면 Redux에 조치를 통해 알려야합니다.

적법 절차에 따라 은행에서 자신의 돈을 인출하는 것과 마찬가지로, Redux는 또한 신청 상태를 변경 / 업데이트하기위한 적법 절차를 설명합니다.

이제 이것은 Redux 원칙 # 2로 이어집니다.

상태는 읽기 전용입니다.
상태를 변경하는 유일한 방법은 무슨 일이 있었는지 설명하는 개체 인 작업을 내보내는 것입니다.

그것은 평범한 언어로 무엇을 의미합니까?

은행으로 걸어 가면 분명한 행동을 염두에두고 그곳으로갑니다. 이 예에서는 돈을 인출하려고합니다.

간단한 Redux 애플리케이션에서 해당 프로세스를 나타내도록 선택한 경우, 은행에 대한 귀하의 조치는 오브젝트로 표시 될 수 있습니다.

다음과 같은 것 :

{
  유형 : "WITHDRAW_MONEY",
  금액 : "$ 10,000"
}

Redux 애플리케이션의 맥락에서이 객체를 액션이라고합니다! 항상 수행하려는 작업을 설명하는 유형 필드가 있습니다. 이 경우 WITHDRAW_MONEY입니다.

Redux 애플리케이션의 상태를 변경 / 업데이트해야 할 때마다 작업을 전달해야합니다.

두 번째 리덕스 원칙.

아직이 방법을 강조하지 마십시오. 나는 단지 기초를 놓는 것입니다. 우리는 곧 많은 예를 탐구 할 것입니다.

3. 계산원은 은행이 감속기를 Redux로하는 것입니다.

좋아, 물러서

위의 이야기에서 은행 금고로 바로 들어가서 은행에서 돈을 회수 할 수는 없었습니다. 아뇨. 계산원을 먼저 봐야 했어요

글쎄, 당신은 어떤 행동을 염두에 두었지만, 그 행동을 모든 계산원에게 전달했는데, 그는 그 돈을 은행의 모든 ​​돈을 담은 금고와 (어떻게하던 방식으로) 전달했습니다.

출납원과 Vault 커뮤니케이션!

Redux에 대해서도 마찬가지입니다.

계산원에게 조치를 알리는 것처럼 Redux 애플리케이션에서도 동일하게 수행해야합니다. 응용 프로그램의 상태를 업데이트하려면 작업을 감속기 (자신의 계산원)에게 전달하십시오.

이 과정을 대부분 액션 파견이라고합니다.

파견은 영어 단어 일뿐입니다. 이 예와 Redux 환경에서는 액션을 감속기로 보내는 것을 의미합니다.

감속기는해야 할 일을 알고 있습니다. 이 예에서는 WITHDRAW_MONEY에 대한 조치를 취하고 돈을 얻습니다.

Redux 조건에서 지출하는 돈은 주입니다. 따라서 감속기는 수행 할 작업을 알고 항상 새로운 상태를 반환합니다.

흠. 이해하기 힘들지 않습니까?

그리고 이것은 마지막 Redux 원칙으로 이어집니다.

조치에 의해 상태 트리가 변환되는 방법을 지정하려면 순수한 리듀서를 작성하십시오.

계속 진행하면서“순수한”감속기가 무엇을 의미하는지 설명하겠습니다. 현재 중요한 것은 React에서 setState를 사용하는 것처럼 응용 프로그램의 상태를 업데이트하려면 항상 새로운 상태를 얻기 위해 감속기로 작업을 보내야한다는 것을 이해하는 것입니다.

세 번째 리덕스 원칙

이 비유를 통해 이제 가장 중요한 Redux 액터가 상점, 리듀서 및 액션이라는 것을 알 수 있습니다.

이 세 액터는 모든 Redux 애플리케이션에 중추적입니다. 그들이 어떻게 작동하는지 이해하면, 많은 행위가 완료됩니다.

2 장 : 첫 번째 Redux 애플리케이션

우리는 언어 교육의 적절성에 실질적인 한계가 있기 때문에 모범과 직접 경험으로 배웁니다.
말콤 글 래드 웰

내가 잊지 못할 방식으로 Redux 원칙을 설명하는 데 충분한 시간을 보냈지 만 구두 지시에는 한계가 있습니다.

원리에 대한 이해를 높이기 위해 예를 보여 드리겠습니다. 당신이 그것을 원한다면 첫 번째 Redux 애플리케이션.

교육에 대한 나의 접근 방식은 난이도가 증가하는 예를 소개하는 것입니다. 따라서 우선이 예제는 Redux를 사용하기 위해 간단한 순수 React 앱을 리팩토링하는 데 중점을 둡니다.

여기서 목표는 간단한 React 프로젝트에서 Redux를 도입하는 방법을 이해하고 기본 Redux 개념에 대한 이해도를 높이는 것입니다.

준비된?

아래는 우리가 작업 할 간단한 "Hello World"React 앱입니다.

기본 Hello World 앱.

웃지 마

React와 같은 "알려진"개념에서 "알 수없는"Redux로 Redux 근육을 유연하게 배우는 방법을 배웁니다.

React Hello World 응용 프로그램의 구조

우리가 작업 할 React 앱은 create-react-app로 부트 스트랩되었습니다. 따라서 앱의 구조는 이미 익숙한 것입니다.

당신이 따라하고 싶다면 Github에서 리포지토리를 잡을 수 있습니다.

컴포넌트를 DOM에 렌더링하는 index.js 항목 파일이 있습니다.

기본 앱 구성 요소는 특정 구성 요소로 구성됩니다.

구성 요소는 기술 소품을 가져 오며이 소품은 사용자에게 표시되는 특정 기술을 담당합니다.

예를 들어 는 다음을 생성합니다.

기본 상태가

또한 는 다음을 생성합니다.

기술 소품이있는 기본 Hello World 앱이

이제 요점을 얻습니다.

앱 구성 요소의 모양은 다음과 같습니다.

src / App.js

import "React"에서 React, {Component};
"./HelloWorld"에서 HelloWorld를 가져옵니다.

App 클래스는 {
 상태 = {
  기술 : "반응"
}
render () {
   반환
}
}

기본 앱 내보내기;

상태 객체를 잘 살펴보십시오.

상태 객체에는 기술 필드가 하나만 있으며 아래 표시된 것처럼 HelloWorld 구성 요소에 소품으로 전달됩니다.

HelloWorld 구성 요소의 구현에 대해 걱정하지 마십시오. 그냥 기술 소품을 받아 멋진 CSS를 적용합니다. 그게 다야.

이것은 주로 Redux에 중점을두기 때문에 스타일의 세부 사항은 생략하겠습니다.

여기 도전이 있습니다.

Redux를 사용하기 위해 앱을 리팩터링하는 방법은 무엇입니까?

상태 객체를 어떻게 가져 와서 Redux에서 완전히 관리합니까? Redux는 앱의 상태 관리자입니다.

다음 섹션에서 이러한 질문에 대답하겠습니다.

Redux에 대한 지식 재 방문

공식 문서의 인용문을 기억하십니까?

Redux는 JavaScript 앱을위한 예측 가능한 상태 컨테이너입니다.

위 문장의 핵심 문구는 상태 컨테이너입니다.

기술적으로 Redux에서 애플리케이션 상태를 관리하려고합니다.

이것이 Redux를 상태 컨테이너로 만드는 것입니다.

React 구성 요소 상태가 여전히 존재합니다. Redux는 그것을 빼앗아 가지 않습니다.

그러나 Redux는 전반적인 애플리케이션 상태를 효율적으로 관리합니다. 은행 금고와 마찬가지로 그렇게 할 수있는 가게가 있습니다.

여기에있는 간단한 구성 요소의 경우 상태 개체는 간단합니다.

여기있어:

{
 기술 : "반응"
}

이것을 컴포넌트 상태에서 꺼내서 Redux가 관리해야합니다.

이전의 설명에서 Bank Vault와 Redux Store의 비유를 기억해야합니다. Bank Vault는 돈을 유지하고 Redux 스토어는 애플리케이션 상태 개체를 유지합니다.

그렇다면 Redux를 사용하기 위해 컴포넌트를 리팩토링하는 첫 단계는 무엇입니까?

그래, 맞아

내에서 구성 요소 상태를 제거하십시오.

Redux 스토어는 앱의 상태를 관리합니다. 그렇게 말하면 App />에서 현재 상태 객체를 제거해야합니다.

import "React"에서 React, {Component};
"./HelloWorld"에서 HelloWorld를 가져옵니다.

App 클래스는 {
 // 상태 객체가 제거되었습니다.
render () {
   반환
}
}

기본 앱 내보내기;

위의 솔루션은 불완전하지만 현재 에는 상태가 없습니다.

커맨드 라인 인터페이스 (CLI)에서 yarn add redux를 실행하여 Redux를 설치하십시오. 올바른 일을하려면 redux 패키지가 필요합니다.

Redux 스토어 생성

에서 상태를 관리하지 않으면 애플리케이션 상태를 관리하기 위해 Redux Store를 만들어야합니다.

은행 금고의 경우 안전한 기계 관리 시설을 만들기 위해 두 명의 기계 엔지니어가 고용되었을 것입니다.

애플리케이션을위한 관리 가능한 상태 유지 기능을 만들기 위해 기계 엔지니어가 필요하지 않습니다. Redux가 제공하는 일부 API를 프로그래밍 방식으로 사용하겠습니다.

Redux 스토어를 생성하는 코드는 다음과 같습니다.

"redux"에서 import {createStore}; // redux 라이브러리에서 가져 오기
const store = createStore (); // 불완전한 솔루션-지금은.

먼저 Redux에서 createStore 팩토리 함수를 가져옵니다. 그런 다음 createStore () 함수를 호출하여 상점을 작성하십시오.

이제 createStore 함수는 몇 가지 인수를 사용합니다. 첫 번째는 감속기입니다.

따라서보다 완전한 상점 작성은 다음과 같이 표시됩니다. createStore (reducer)

이제 왜 감속기가 들어 있는지 설명하겠습니다.

상점과 감속기 관계

은행 비유로 돌아 가기

출금을 위해 은행에 가면 출납원을 만납니다. WITHDRAW_MONEY 인 텐트 / 액션을 계산원에게 알리고 나면 요청 된 금액 만 전달하지 않습니다.

아니.

계산원은 먼저 계좌에 원하는 인출 거래를 수행하기에 충분한 돈이 있는지 확인합니다.

당신은 얼마나 철회하고 싶어?

계산원은 먼저 당신이 말하는 돈을 가지고 있는지 확인합니다.

Vault는 모든 돈을 은행에 보관하기 때문에 컴퓨터에서 Vault와 통신하는 모든 것을 볼 수 있습니다.

간단히 말해, 계산원과 보관소는 항상 동기화됩니다. 좋은 친구!

계산원과 금고가 동기화되었습니다!

Redux STORE (자신의 Vault)와 Redux REDUCER (자신의 Cashier)도 마찬가지입니다.

Store와 Reducer는 훌륭한 친구입니다. 항상 동기화됩니다.

왜?

REDUCER는 항상 STORE와 "대화"합니다. 계산원이 Vault와 동기화 상태를 유지하는 것처럼.

이것은 저장소 작성이 Reducer를 사용하여 호출되어야하는 이유를 설명하며 이는 필수입니다. Reducer는 createStore ()에 전달되는 유일한 필수 인수입니다.

리듀서는

다음 섹션에서는 Reducers를 간단히 살펴본 다음 REDUCER를 createStore 팩토리 함수에 전달하여 STORE를 작성합니다.

감속기

우리는 곧 더 자세한 내용을 살펴볼 것이지만 지금은 간략하게 설명하겠습니다.

리듀서라는 말을 들으면 무슨 생각이 들까 요?

줄이다?

그래, 내 생각이야

축소처럼 들립니다.

Redux 공식 문서에 따르면 :

감속기는 Redux에서 가장 중요한 개념입니다.
감속기는 Redux에서 가장 중요한 개념입니다. 더 경험이 풍부한 engr. 미들웨어에 찬성하여 주장 할 수 있습니다.

우리 계산원은 매우 중요한 사람입니다.

그래서 Reducer와의 관계는 무엇입니까? 무엇을합니까?

보다 기술적 인 용어로 감속기는 축소 기능이라고도합니다. 눈치 채지 못했을 수도 있지만 Array.reduce () 메서드에 익숙하지 않은 경우 이미 감속기를 사용하고있을 것입니다.

다음은 빠른 새로 고침입니다.

아래 코드를 고려하십시오.

JavaScript 배열에서 값의 합계를 얻는 일반적인 방법입니다.

arr = [1,2,3,4,5]하자
합하자 = arr.reduce ((x, y) => x + y)
console.log (sum) // 15

후드 아래에서 arr.reduce로 전달 된 함수를 감속기라고합니다.

이 예제에서 감속기는 누산기 및 currentValue의 두 값을 취합니다. 여기서 x는 누산기이고 y는 currentValue입니다.

같은 방식으로 Redux Reducer는 단지 기능입니다. 두 개의 매개 변수를받는 함수입니다. 첫 번째는 앱의 상태이고 다른 하나는 ACTION입니다.

이런! 그러나 REDUCER로 전달 된 STATE와 ACTION은 어디에서 왔습니까?

Redux를 배우 면서이 질문을 몇 번이나 나에게 물었습니다.

먼저 Array.reduce () 예제를 다시 살펴보십시오.

arr = [1,2,3,4,5]하자
합하자 = arr.reduce ((x, y) => x + y)
console.log (sum) // 15

Array.reduce 메소드는 필요한 인수 x와 y를 함수 인수 reducer로 전달합니다. 그래서 논쟁은 얇은 공기에서 나오지 않았습니다.

Redux에 대해서도 마찬가지입니다.

Redux 감속기는 또한 특정 방법으로 전달됩니다. 그게 뭔지 알아?

여기 있습니다!

createStore (리듀서)

createStore 팩토리 기능. 곧 보시 겠지만이 과정에 조금 더 참여하고 있습니다.

Array.reduce ()와 마찬가지로 createStore ()는 인수를 리듀서에 전달합니다.

기술적 인 부분이 두렵지 않은 경우 다음은 Redux 소스 코드 내에서 createStore 구현의 제거 된 버전입니다.

함수 createStore (reducer) {
    var 상태;
    var listeners = []

    함수 getState () {
        반품 상태
    }
    
    구독 기능 (리스너) {
        listeners.push (리스너)
        구독 취소 () {
            var index = listeners.indexOf (리스너)
            listeners.splice (인덱스, 1)
        }
    }
    
    함수 디스패치 (action) {
        상태 = 감속기 (상태, 동작)
        listeners.forEach (listener => 리스너 ())
    }

    급파({})

    return {dispatch, subscribe, getState}
}

위의 코드를 얻지 못하면 자신을 때리지 마십시오. 내가 정말로 지적하고자하는 것은 디스패치 기능 내에 있습니다.

상태와 동작으로 감속기가 어떻게 호출되는지 확인

모든 것을 말하면, Redux 저장소를 만들기위한 가장 작은 코드는 다음과 같습니다.

"redux"에서 import {createStore};
const store = createStore (reducer); // 생성 된 감속기를 포함하도록 업데이트되었습니다.

리팩토링 프로세스로 돌아 가기

Redux를 사용하기 위해 "Hello World"React 애플리케이션의 리팩토링으로 돌아가 보겠습니다.

이전 섹션의 어느 시점에서라도 당신을 잃어버린 경우 섹션을 한 번만 더 읽으십시오. 섹션이 잠깐 들릴 것입니다. 더 나은 방법으로 질문을해도됩니다.

자 여기에 우리가 가지고있는 모든 코드가 있습니다 :

import "React"에서 React, {Component};
"./HelloWorld"에서 HelloWorld를 가져옵니다.

 "redux"에서 import {createStore};
 const store = createStore (reducer);

 App 클래스는 {
 render () {
    반환
 }
}

기본 앱 내보내기;

맞는 말이다?

이 코드에 문제가있는 것 같습니다. 4 행을 참조하십시오.

createStore에 전달 된 리듀서 함수가 아직 없습니다.

이제 우리는 하나를 작성해야합니다. 감속기는 단지 기능 일뿐입니다. 기억하십니까?

reducers라는 새 디렉토리를 작성하고 거기에 index.js 파일을 작성하십시오. 기본적으로 감속기 기능은 src / reducers / index.js 경로에 있습니다.

먼저이 파일에서 간단한 함수를 내 보냅니다.

수출 기본값 () => {
}

감속기는 이전에 설정된 두 가지 주장을 취합니다. 지금 우리는 첫 번째 주장 인 STATE에 관심을 가질 것입니다

이것을 함수에 넣으면 다음과 같이됩니다.

내보내기 기본 (상태) => {
}

나쁘지 않다.

감속기는 항상 무언가를 반환합니다. 초기 Array.reduce () reducer 예제에서 누산기와 현재 값의 합을 반환했습니다.

Redux 감속기의 경우 항상 응용 프로그램의 새로운 상태를 반환합니다.

설명하겠습니다.

은행에 들어가서 성공적으로 인출 한 후에는 은행 금고에 보관 된 현재 금액이 더 이상 동일하지 않습니다. 이제 $ 200를 인출하면 $ 200가 부족합니다. 계정 잔액이 $ 200 하락했습니다.

캐쉬어와 볼트는 현재 보유하고있는 금액과 동기화 상태를 유지합니다.

계산원과 마찬가지로 이것은 감속기가 작동하는 방식입니다.

계산원과 마찬가지로 감속기는 항상 응용 프로그램의 새로운 상태를 반환합니다. 무언가가 변경된 경우를 대비하여. 인출 조치가 수행 된 경우에도 동일한 은행 잔고를 발행하고 싶지 않습니다.

나중에 상태를 변경 / 업데이트하는 방법에 대해 살펴 보겠습니다. 지금은 맹목적인 신뢰만으로 충분할 것입니다.

자, 문제에 다시 돌아갑니다.

현재 상태 변경 / 업데이트에 대해 걱정하지 않으므로 동일한 상태가 전달 될 때 새로운 상태를 계속 반환합니다.

다음은 감속기 내에서 이에 대한 표현입니다.

내보내기 기본 (상태) => {
반품 상태
}

조치를 취하지 않고 은행에 가면 은행 잔고가 그대로 유지됩니다.

ACTION을 수행하지 않거나 리듀서로 전달하지 않기 때문에 동일한 상태로 돌아갑니다.

두 번째 createStore 인수

은행의 계산원을 방문 할 때 계정 잔액을 요청하면 해당 직원이 찾아보고 알려줍니다.

얼마예요?

그러나 어떻게?

은행에서 처음으로 계좌를 만들었을 때 약간의 예금으로 계좌를 만들 었는지 여부입니다.

어, 최초 입금 $ 500의 새 계좌가 필요합니다

이것을 귀하의 계정에 초기 입금이라고합니다.

Redux (으)로 돌아 가기

같은 방법으로, redux STORE (자신의 돈을 보관하는 Vault)를 만들 때 초기 입금으로 옵션을 선택할 수 있습니다.

Redux 용어에서는이를 앱의 initialState라고합니다.

코드에서 생각하면 initialState는 createStore 함수 호출에 전달 된 두 번째 인수입니다.

const store = createStore (reducer, initialState);

금전적 조치를 취하기 전에 은행 계좌 잔고를 요청한 경우 최초 입금은 항상 귀하에게 반환됩니다.

그 후, 화폐 조치를 수행 할 때마다이 초기 예치금도 업데이트됩니다.

이제 Redux도 마찬가지입니다.

initialState로 전달 된 객체는 Vault에 초기 예금과 같습니다. 조치를 수행하여 상태를 업데이트하지 않으면이 initialState는 항상 애플리케이션의 상태로 리턴됩니다.

이제 응용 프로그램을 업데이트하여 초기 상태로 전달합니다.

const initialState = {기술 : "반응"};
const store = createStore (reducer, initialState);

initialState가 어떻게 객체인지, 그리고 리팩토링을 시작하기 전에 React 앱의 기본 상태와 정확히 동일합니다.

이제이 시점에서 보유하고있는 모든 코드가 있습니다. 리듀서도 앱으로 가져 왔습니다.

App.js

import "React"에서 React, {Component};
"./HelloWorld"에서 HelloWorld를 가져옵니다.
"./reducers"에서 수입 감속기;
"redux"에서 import {createStore};

const initialState = {기술 : "반응"};
const store = createStore (reducer, initialState);

App 클래스는 {
 render () {
    반환
 }
 }

기본 앱 내보내기;

reducers / index.js

기본 상태 내보내기 => {
반품 상태
}

코드를 작성하고 지금 앱을 실행하려고하면 오류가 발생합니다. 왜?

에 전달 된 기술 소품을 살펴보십시오. 여전히 this.state.tech를 읽습니다.

더 이상 에 연결된 상태 개체가 없으므로 정의되지 않습니다.

고쳐 봅시다.

해결책은 매우 간단합니다. 상점이 이제 응용 프로그램의 상태를 관리하므로 상점에서 응용 프로그램 STATEobject를 검색해야합니다. 그러나 어떻게?

createStore ()를 사용하여 상점을 작성할 때마다 작성된 상점에는 세 가지 노출 된 메소드가 있습니다.

그중 하나가 getState ()입니다.

어느 시점에서든 작성된 상점에서 getState 메소드를 호출하면 애플리케이션의 현재 상태가 리턴됩니다.

이 경우 store.getState ()는 {tech : "React"} 오브젝트를 리턴합니다. 이것이 STORE를 작성할 때 createStore () 메소드에 전달한 초기 상태이기 때문입니다.

이 모든 것이 지금 어떻게 연결되는지 봅니까?

따라서 기술 소품은 아래와 같이 로 전달됩니다.

App.js

import "React"에서 React, {Component};
"./HelloWorld"에서 HelloWorld를 가져옵니다.
"redux"에서 import {createStore};

const initialState = {기술 : "반응"};
const store = createStore (reducer, initialState);

App 클래스는 {
 render () {
    반환
 }
 }
“this.state”를“store.getState ()”로 바꾸십시오

감속기 /Reducer.js

기본 상태 내보내기 => {
반품 상태
}

그리고 그게 다야! Redux 기본 사항을 배우고 Redux를 사용하기 위해 간단한 React 앱을 리팩터링했습니다.

React 애플리케이션의 상태는 이제 Redux에서 관리합니다. 상태 오브젝트에서 가져와야하는 것은 위와 같이 상점에서 가져옵니다.

이 전체 리팩토링 프로세스를 이해했으면합니다.

더 빠른 개요를 보려면이 Github diff를 살펴보십시오.

"Hello World"프로젝트를 통해 우리는 몇 가지 필수적인 Redux 개념을 잘 살펴 보았습니다. 아주 작은 프로젝트 임에도 불구하고이를 기반으로 훌륭한 기초를 제공합니다!

가능한 잡았다

방금 결론을 내린 Hello World 예제에서 상점에서 상태를 가져 오는 데 사용할 수있는 솔루션은 다음과 같습니다.

App 클래스는 {
  상태 = store.getState ();
  render () {
    return ;
  }
}

어떻게 생각해? 이것이 효과가 있습니까?

다시 말해, 다음 두 가지 방법은 React 컴포넌트의 상태를 초기화하는 올바른 방법입니다.

(에이)

App 클래스는 {
 생성자 (소품) {
   슈퍼 (props);
   this.state = {}
  }
}

(비)

App 클래스는 {
  상태 = {}
}

따라서 질문에 대한 대답으로 돌아가서 솔루션은 정상적으로 작동합니다.

store.getState ()는 Redux STORE에서 현재 상태를 가져옵니다.

그러나 state = store.getState () 할당은 Redux에서 가져온 상태를 구성 요소의 상태로 할당합니다.

암시 적으로 와 같은 렌더의 리턴 문이 유효합니다.

store.getState (). tech가 아닌 this.state.tech를 읽습니다.

이것이 효과가 있지만, 그것은 Redux의 이상적인 철학에 위배됩니다.

앱 내에서 this.setState ()를 실행하면 Redux의 도움없이 앱의 상태가 업데이트됩니다.

이것이 기본 반응 메커니즘이며 원하는 것이 아닙니다. Redux STORE가 관리하는 상태가 단일 진실 소스가되기를 원합니다.

store.getState ()에서와 같이 상태를 검색하든 또는 상태를 업데이트 / 변경할 때 (나중에 설명 할) setState ()가 아니라 Redux에 의해 완전히 관리되기를 원합니다.

Redux는 앱의 상태를 관리하기 때문에 필요한 구성 요소에 대한 소품으로 Redux STORE에서 상태를 피드하기 만하면됩니다.

또 다른 큰 의문은 "왜 Redux에서 내 앱 상태를 관리하기 위해이 모든 스트레스를 겪어야합니까?"입니다.

감속기, 저장, createStore blah, blah, blah…

그래, 알겠다

나도 그렇게 느꼈다.

그러나 은행에 가지 않고 자신의 돈을 인출하는 적법한 절차를 따르지 않는다는 사실을 고려하십시오. 그것은 당신의 돈이지만 적법한 절차를 따라야합니다.

Redux에 대해서도 마찬가지입니다.

Redux에는 작업을 수행하기위한 자체 "프로세스"가 있습니다. 우리는 그것이 어떻게 작동하는지 배워야합니다 – 그리고 여러분은 나쁘게하지 않습니다!

결론 및 요약

이 장은 흥미 롭습니다. 우리는 앞으로 더 흥미로운 것들을위한 적절한 기초를 세우는 데 주력했습니다.

이 장에서 배운 몇 가지 사항은 다음과 같습니다.

  • Redux는 JavaScript 앱을위한 예측 가능한 상태 컨테이너입니다.
  • Redux의 createStore 팩토리 기능은 Redux STORE를 작성하는 데 사용됩니다.
  • Reducer는 createStore ()에 전달되는 유일한 필수 인수입니다.
  • 감소 기는 기능 일뿐입니다. 두 개의 매개 변수를받는 함수입니다. 첫 번째는 앱의 상태이고 다른 하나는 액션입니다.
  • 감속기는 항상 응용 프로그램의 새로운 상태를 반환합니다.
  • 애플리케이션의 초기 상태 인 initialState는 createStore 함수 호출에 전달 된 두 번째 인수입니다.
  • Store.getState ()는 응용 프로그램의 현재 상태를 반환합니다. 여기서 Store는 유효한 Redux STORE입니다.

운동 소개

제발 제발 제발 운동을 건너 뛰지 마세요 특히 Redux 기술에 대해 확신이없고이 가이드를 최대한 활용하고 싶을 경우.

따라서 개발자 모자를 잡고 코드를 작성하십시오. :)

또한 언제든지 솔루션에 대한 의견을 보내려면 해시 태그 #UnderstandingRedux를 사용하여 트윗하면 기꺼이 살펴 보겠습니다. 모든 트윗에 다가올 수는 없지만 약속 할 것입니다.

연습을 정리하면 다음 섹션에서 see겠습니다.

긴 내용을 읽는 좋은 방법은 더 짧은 소화 가능한 비트로 나누는 것입니다. 이 운동은 당신이 그 일을하는 데 도움이됩니다. 시간을 내고 연습 문제를 해결 한 다음 다시 읽으십시오. 효과적인 공부 방법입니다.

이 연습에 대한 솔루션을보고 싶으십니까? 책 패키지에 실습에 대한 솔루션을 포함 시켰습니다. (무료) 전자 책 (PDF 및 Epub)을 다운로드하면 함께 제공되는 코드 및 운동 솔루션을 얻는 방법에 대한 지침을 찾을 수 있습니다.

여기이 섹션의 연습이 있습니다.

운동

(a) Redux를 사용하도록 사용자 카드 앱을 리팩터링하십시오

책에 동봉 된 코드 파일에는 React로만 작성된 사용자 카드 앱이 있습니다. 앱의 상태는 React를 통해 관리됩니다. 당신의 임무는 Redux에 의해서만 상태를 관리하는 것입니다.

연습 : React로 빌드 된 사용자 카드 앱. Redux를 사용하기위한 리 팩터

3 장 : 동작으로 상태 업데이트 이해

이제 Redux의 기본 개념에 대해 살펴 봤으므로 더 흥미로운 작업을 시작하겠습니다.

이 장에서는 모든 프로세스를 자세히 설명하면서 다른 프로젝트를 진행하면서 계속 학습합니다.

그렇다면 이번에는 어떤 프로젝트가 진행 될까요?

나는 완벽한 것을 얻었다.

아래 모형을 고려하십시오.

Hello world 앱의 디자인이 업데이트되었습니다.

아, 이전 예제와 비슷하지만 약간 변경되었습니다. 이번에는 사용자 조치를 고려합니다. 버튼 중 하나를 클릭하면 아래 GIF와 같이 응용 프로그램의 상태를 업데이트하려고합니다.

GIF!

이전 예와 다른 점은 다음과 같습니다. 이 시나리오에서 사용자는 애플리케이션 상태에 영향을주는 특정 조치를 수행하고 있습니다. 앞의 예에서는 사용자 작업을 고려하지 않은 채 앱의 초기 상태 만 표시했습니다.

Redux Action이란 무엇입니까?

은행에 들어가면 계산원이 조치, 즉 은행에 들어 오려는 의도를받습니다. 이전 예에서 WITHDRAWAL_MONEY입니다. 돈이 은행 금고를 떠나는 유일한 방법은 자신의 행동이나 의도를 계산원에게 알리는 것입니다.

이제 Redux Reducer도 마찬가지입니다.

순수 React의 setState ()와 달리 Redux 애플리케이션의 상태를 업데이트하는 유일한 방법은 의도를 REDUCER에 알리는 것입니다.

그러나 어떻게?

행동을 파견함으로써!

실제로는 수행하려는 정확한 행동을 알고 있습니다. 당신은 아마 그것을 슬립에 적어 그것을 계산원에게 넘겨 줄 수있을 것입니다.

이것은 Redux와 거의 같은 방식으로 작동합니다. 유일한 도전은 Redux 앱에서 작업을 어떻게 설명합니까? 카운터를 통해 말하거나 슬립에 적어 두지 않아도됩니다.

좋은 소식이 있습니다.

액션은 일반 JavaScript 객체로 정확하게 설명됩니다. 더 이상 없습니다.

한 가지 알아야 할 것이 있습니다. 활동에는 유형 필드가 있어야합니다. 이 필드는 조치의 의도를 설명합니다.

은행 이야기에서 은행에 대한 귀하의 행동을 설명하면 다음과 같습니다.

{
  유형 : "withdraw_money"
}

그게 다예요

Redux 작업은 일반 개체로 설명됩니다.

위의 조치를 살펴보십시오.

유형 필드 만 은행에서 인출 할 것으로 예상되는 조치를 정확하게 설명한다고 생각하십니까?

흠. 나는 그렇게 생각하지 않습니다. 인출하고 싶은 금액은 어떻습니까?

여러 번 작업에 대한 자세한 설명을 보려면 추가 데이터가 필요합니다. 아래 조치를 고려하십시오. 나는 이것이 더 잘 묘사 된 행동을한다고 주장한다.

{
  유형 : "withdraw_money",
  금액 : "$ 4000"
}

이제 조치를 설명하는 정보가 충분합니다. 예를 들어, 은행 계좌 번호와 같이 조치에 포함될 수있는 다른 모든 세부 사항은 무시하십시오.

유형 필드 외에 Redux Action의 구조는 실제로 당신에게 달려 있습니다.

그러나 일반적인 접근 방식은 아래와 같이 type 필드와 payload 필드를 갖는 것입니다.

{
  유형 : "",
  페이로드 : {}
}

유형 필드는 조치를 설명하고 조치를 설명하는 기타 모든 필수 데이터 / 정보는 페이로드 오브젝트에 배치됩니다.

예를 들면 다음과 같습니다.

{
  유형 : "withdraw_money",
  페이로드 : {
     금액 : "$ 4000"
  }
}

그래! 이것이 바로 행동입니다.

감속기의 동작에 대한 응답 처리

조치가 무엇인지 이해 했으므로 실제적인 의미에서 조치가 어떻게 유용한 지 확인하는 것이 중요합니다.

앞서 리듀서가 두 가지 주장을한다고 말했습니다. 한 상태, 다른 행동.

간단한 리듀서는 다음과 같습니다.

기능 감속기 (상태, 동작) {
  // 새로운 상태를 반환
}

조치는 두 번째 매개 변수로 Reducer에 전달됩니다. 그러나 우리는 기능 자체 내에서 아무것도하지 않았습니다.

감속기로 전달 된 작업을 처리하려면 일반적으로 다음과 같이 감속기 내에 switch 문을 작성하십시오.

기능 감속기 (상태, 동작) {
스위치 (action.type) {
"withdraw_money"사례 :
// 무언가
단절;
사례 "예금":
// 무언가
단절;
기본:
반환 상태;
}
}

어떤 사람들은 switch 문을 좋아하지 않는 것 같지만 기본적으로 단일 필드에서 가능한 값을위한 if / else입니다.

위의 코드는 조치 유형을 전환하고 전달 된 조치 유형에 따라 무언가를 수행합니다. 기술적으로, 새로운 상태를 리턴하려면 무언가가 필요합니다.

더 설명하겠습니다.

특정 웹 페이지에 두 개의 가상 버튼 (버튼 # 1 및 버튼 # 2)이 있고 상태 객체가 다음과 같다고 가정합니다.

{
isOpen : true,
isClicked : false,
  }

버튼 # 1을 클릭하면 isOpen 필드를 토글하려고합니다. React 앱의 맥락에서 솔루션은 간단합니다. 버튼을 클릭하자마자 다음을 수행하십시오.

this.setState ({isOpen :! this.state.isOpen})

또한 # 2를 클릭하면 isClicked 필드를 업데이트한다고 가정합니다. 다시 말하지만, 해결책은 간단하며 다음과 같습니다.

this.setState ({isClicked :! this.state.isClicked})

좋은.

Redux 앱에서는 setState ()를 사용하여 Redux에서 관리하는 상태 객체를 업데이트 할 수 없습니다.

먼저 액션을 전달해야합니다.

동작이 아래와 같다고 가정 해 봅시다.

#1 :

{
유형 : "is_open"
}

# 2 :

{
유형 : "is_clicked"
}

Redux 앱에서 모든 작업은 감속기를 통과합니다.

그들 모두. 따라서이 예에서 동작 # 1과 동작 # 2는 모두 동일한 감속기를 통과합니다.

이 경우 감속기는 어떻게 각각을 차별화합니까?

네 맞아요

action.type을 전환하면 번거 로움없이 두 작업을 모두 처리 할 수 ​​있습니다.

여기 내가 의미하는 바가있다 :

기능 감속기 (상태, 동작) {
스위치 (action.type) {
"is_open"사례 :
반환; // 새로운 상태를 반환
"is_clicked"사례 :
반환; // 새로운 상태를 반환
기본:
반환 상태;
}
}

이제 switch 문이 유용한 이유를 알 수 있습니다. 모든 동작은 감속기를 통해 흐릅니다. 따라서 각 조치 유형을 개별적으로 처리하는 것이 중요합니다.

다음 섹션에서는 아래에서 미니 앱을 만드는 작업을 계속합니다.

응용 프로그램의 동작 검사

앞에서 설명한 것처럼 응용 프로그램 상태를 업데이트하려는 의도가있을 때마다 작업을 전달해야합니다.

이러한 의도가 사용자 클릭, 시간 초과 이벤트 또는 Ajax 요청으로 시작 되더라도 규칙은 동일하게 유지됩니다. 액션을 파견해야합니다.

이 응용 프로그램도 마찬가지입니다.

응용 프로그램의 상태를 업데이트하려고하기 때문에 버튼을 클릭 할 때마다 액션을 전달해야합니다.

먼저 행동을 설명해 봅시다.

그것을 시도하고 당신이 그것을 얻을 경우 참조하십시오.

내가 생각해 낸 것은 다음과 같습니다.

반응 버튼의 경우 :

{
    유형 : "SET_TECHNOLOGY",
    텍스트 : "반응"
  }

React-Redux 버튼의 경우 :

{
     유형 : "SET_TECHNOLOGY",
     텍스트 : "React-redux"
   }

그리고 마지막으로:

{
   유형 : "SET_TECHNOLOGY",
  텍스트 : "Elm"
}

쉬워요?

세 가지 조치의 유형 필드는 동일합니다. 세 개의 버튼이 모두 같은 일을하기 때문입니다. 은행 고객 인 경우 모두 돈을 입금하지만 금액은 다릅니다. 액션 유형은 DEPOSIT_MONEY이지만 금액 필드는 다릅니다.

또한 액션 유형이 모두 대문자로 표기되어 있음을 알 수 있습니다. 그것은 의도적이었습니다. 필수는 아니지만 Redux 커뮤니티에서 매우 인기있는 스타일입니다.

바라건대 이제 내가 어떻게 행동을했는지 이해했으면합니다.

액션 크리에이터 소개

위에서 만든 작업을 살펴보십시오. 우리는 몇 가지를 반복하고 있음을 알 수 있습니다.

하나, 그들은 모두 같은 유형 필드를 가지고 있습니다. 이러한 작업을 여러 곳으로 파견해야하는 경우, 모든 곳에서 해당 작업을 복제해야합니다. 그다지 좋지 않습니다. 특히 코드를 건조하게 유지하는 것이 좋습니다.

우리는 이것에 대해 뭔가를 할 수 있습니까?

확실한!

액션 제작자를 환영합니다.

Redux는이 모든 멋진 이름을 가지고 있습니다. 감속기, 액션, 그리고 이제 액션 크리에이터 :)

그것들이 무엇인지 설명하겠습니다.

액션 크리에이터는 단순히 액션을 만드는 데 도움이되는 함수입니다. 그게 다야. 그것들은 액션 객체를 반환하는 함수입니다.

특정 예에서 텍스트 매개 변수를 가져 와서 다음과 같이 조치를 리턴하는 함수를 작성할 수 있습니다.

내보내기 기능 setTechnology (텍스트) {
  {
     유형 : "SET_TECHNOLOGY",
     기술 : 텍스트
   }
}

이제 코드를 어디에나 복제 할 필요가 없습니다. 언제든지 setTechnology 액션 제작자에게 전화하면 조치를 다시받을 수 있습니다.

기능을 잘 사용하는 것.

ES6를 사용하여 위에서 만든 액션 생성기를 다음과 같이 단순화 할 수 있습니다.

const setTechnology = text => ({유형 : "SET_TECHNOLOGY", 텍스트});

이제 끝났습니다.

모든 것을 하나로 모으기

이전 섹션에서 고급 Hello World 앱을 격리하는 데 필요한 모든 중요한 구성 요소에 대해 설명했습니다.

이제 모든 것을 모아서 앱을 만들어 봅시다. 흥분한?

먼저 폴더 구조에 대해 이야기하겠습니다.

은행에 도착하면 계산원이 자신의 칸막이 / 사무실에 앉아있을 가능성이 높습니다. 금고는 또한 안전한 방에 안전하게 보관됩니다. 정당한 이유들로, 상황이 조금 더 조직적으로 느껴집니다. 자신의 공간에있는 모든 사람.

Redux에 대해서도 마찬가지입니다.

redux 앱의 주요 액터가 자신의 폴더 / 디렉토리에있는 것이 일반적입니다.

액터는 리듀서, 액션 및 스토어를 의미합니다.

앱 디렉토리 내에 서로 다른 세 개의 폴더를 만들고 각 액터 이름을 따서 이름을 지정하는 것이 일반적입니다.

꼭 필요한 것은 아니며 불가피하게 프로젝트 구성 방법을 결정해야합니다. 그러나 큰 응용 프로그램의 경우 이것은 꽤 괜찮은 연습입니다.

우리는 이제 현재 앱 디렉토리를 리팩토링 할 것입니다. 몇 개의 새 디렉토리 / 폴더를 작성하십시오. 하나는 감속기, 다른 하나는 상점, 마지막은 행동

이제 다음과 같은 구성 요소 구조가 있어야합니다.

각 폴더에서 index.js 파일을 작성하십시오. 이는 각 Redux 액터 (리듀서, 상점 및 조치)의 진입 점이됩니다. 영화 배우처럼 배우라고 부릅니다. 그것들은 Redux 시스템의 주요 구성 요소입니다.

이제이 새로운 디렉토리 구조를 사용하기 위해 2 장 : 첫 번째 Redux 애플리케이션의 이전 앱을 리팩터링합니다.

store / index.js

"redux"에서 import {createStore};
"../reducers"에서 수입 감속기;

const initialState = {기술 : "반응"};
내보내기 const store = createStore (reducer, initialState);

이것은 우리가 전에했던 것과 같습니다. 유일한 차이점은 상점이 이제 다른 Redux 액터에 대해 별도의 칸막이 / 사무실을 갖는 것과 같이 자체 index.js 파일로 생성된다는 것입니다.

이제 앱의 어느 곳에서나 상점이 필요한 경우 "./store"에서 가져 오기 상점과 같이 상점을 안전하게 가져올 수 있습니다.

그것을 말하면,이 특정 예제의 App.js 파일은 이전 예제와 약간 다릅니다.

App.js

import "React"에서 React, {Component};
"./HelloWorld"에서 HelloWorld를 가져옵니다.
"./ButtonGroup"에서 ButtonGroup 가져 오기;
"./store"에서 {상점} 가져 오기;

App 클래스는 {
  render () {
    반환 [
      ,
      
    ];
  }
}

기본 앱 내보내기;

무엇이 다른가요?

4 행에서 상점은 자체 '큐비클'에서 가져옵니다. 또한 다양한 기술을 사용하고 버튼을 뱉어내는 구성 요소가 있습니다. ButtonGroup 구성 요소는 "Hello World"텍스트 아래에있는 세 개의 단추 렌더링을 처리합니다.

또한 앱 구성 요소가 배열을 반환한다는 것을 알 수 있습니다. 이것이 React 16 케이크입니다. React 16을 사용하면 인접한 JSX 요소를 div로 래핑 할 필요가 없습니다. 원하는 경우 배열을 사용할 수 있지만 배열의 각 요소에 키 소품을 전달하십시오.

바로 App.js 구성 요소입니다.

ButtonGroup 구성 요소의 구현은 매우 간단합니다. 여기있어:

ButtonGroup.js

수입 "반응"에서 반응;

const ButtonGroup = ({기술}) => (
  
    {technologies.map ((tech, i) => (       <버튼         data-tech = {tech}         key = {`btn-$ {i}`}         className = "hello-btn"       >         {기술}            ))}    ); 기본 ButtonGroup 내보내기;

ButtonGroup은 기술로 표시되는 다양한 기술을 사용하는 상태 비 저장 구성 요소입니다.

map을 사용하여이 배열을 반복하고 배열의 각 기술에 대해