Redux 시작 : 왜 Redux?

React를 배우는 경우 거의 항상 Redux가 얼마나 위대한 지, 시도해야한다고 말하는 것을 거의 항상들을 수 있습니다. React 생태계는 신속한 속도로 성장하고 있으며 도서관이 너무 많아서 Flow, Redux, Middlewares, Mobx 등과 같이 React와 연결될 수 있습니다.

반응을 배우는 것은 쉽지만 전체 React 생태계에 익숙해지는 데는 시간이 걸립니다. 이 튜토리얼은 React 생태계의 필수 구성 요소 중 하나 인 Redux에 대한 소개입니다.

기본 비 레드 럭스 용어

다음은 일반적으로 사용되는 용어 중 일부가 익숙하지 않을 수도 있지만 Redux 자체에만 국한되지는 않습니다. 이 섹션을 훑어보고 무언가가 의미가없는 경우 여기로 돌아올 수 있습니다.

순수한 기능

순수한 기능은 만족해야 할 두 가지 추가 제약 조건을 가진 정상적인 기능입니다.

1. 입력 세트가 주어지면 함수는 항상 동일한 출력을 반환해야합니다.
2. 부작용이 없습니다.

예를 들어, 두 숫자의 합을 반환하는 순수한 함수가 있습니다.

 / * 순수한 추가 기능 */<br> const add = (x, y) => {<br> 반환 XY;<br> }<br><br> Console.log (Add (2,3)) // 5<br><br>

순수한 기능은 예측 가능한 출력을 제공하며 결정 론적입니다. 반환 값을 계산하는 것 이외의 기능을 수행 할 때 함수는 불순 해집니다.

예를 들어, 아래 추가 기능은 글로벌 상태를 사용하여 출력을 계산합니다. 또한이 기능은 값을 콘솔에 기록하며, 이는 부작용으로 간주됩니다.

 const y = 10;<br><br> const infiperadd = (x) => {<br> console.log (`입력은 $ {x} 및 $ {y}`);<br> 반환 XY;<br> }<br>

관찰 가능한 부작용

"관찰 가능한 부작용"은 외부 세계와의 함수에 의한 상호 작용을위한 멋진 용어입니다. 함수가 함수 외부에 존재하는 변수에 값을 쓰려고하거나 외부 방법을 호출하려고하면 이러한 것들을 안전하게 호출 할 수 있습니다.

그러나 순수한 함수가 다른 순수 함수를 호출하면 함수는 순수한 것으로 취급 될 수 있습니다. 일반적인 부작용은 다음과 같습니다.

• API 호출
• 콘솔에 로깅 또는 인쇄 데이터
• 돌연변이 데이터
• DOM 조작
• 현재 시간 검색

컨테이너 및 프리젠 테이션 구성 요소

Component Architecture를 두 가지로 분할하는 것은 React Applications로 작업하는 동안 유용합니다. 컨테이너 구성 요소와 프리젠 테이션 구성 요소의 두 가지 범주로 광범위하게 분류 할 수 있습니다. 그것들은 또한 똑똑하고 멍청한 구성 요소로 널리 알려져 있습니다.

컨테이너 구성 요소는 일이 어떻게 작동하는지에 관한 반면, 프리젠 테이션 구성 요소는 사물이 어떻게 보이는지에 관한 것입니다. 개념을 더 잘 이해하기 위해 다른 튜토리얼에서 컨테이너 대 React의 프리젠 테이션 구성 요소에서 다루었습니다.

변한 대상 대 불변의 대상

돌연변이 가능한 물체는 다음과 같이 정의 할 수 있습니다.

돌연변이 가능한 물체는 상태가 생성 된 후 수정 될 수있는 객체입니다.

불변성은 정반대입니다. 불변의 대상은 그 상태가 생성 된 후에 상태를 수정할 수없는 대상입니다. JavaScript에서 문자열과 숫자는 불변이지만 객체와 어레이는 그렇지 않습니다. 예제는 차이를 더 잘 보여줍니다.

 / *문자열과 숫자는 불변입니다 */<br><br> a = 10을하자;<br><br> B = A를하자;<br><br> b = 3;<br><br> console.log (`a = $ {a} 및 b = $ {b}`); // a = 10 및 b = 3<br><br> / * 그러나 객체와 어레이는 */<br><br> / *객체부터 시작하자 */<br><br> user = {<br> 이름 : "밥",<br> 나이 : 22,<br> 직업 : "없음"<br> }<br><br> active_user = 사용자;<br><br> active_user.name = "Tim";<br><br> // 두 객체의 값이 동일합니다<br> console.log (active_user); // { "이름": "Tim", "Age": 22, "job": "None"}<br><br> Console.log (사용자); // { "이름": "Tim", "Age": 22, "job": "None"}<br><br> / * 이제 배열의 경우 */<br><br> usersId = [1,2,3,4,5]<br><br> UsersIddup = userID를 보자;<br><br> useridDup.pop ();<br><br> Console.log (UsersIddup); // [1,2,3,4]<br> Console.log (usersId); // [1,2,3,4]<br>

객체를 불변으로 만들려면 store.getState ()를 사용하여 응용 프로그램의 현재 상태 트리에 액세스하십시오.

store.subscribe (Listener) - 주의 변화를 들으려면. 행동이 파견 될 때마다 호출됩니다.

상점을 만들어 봅시다. Redux에는 새 매장을 만들기위한 configureStore 방법이 있습니다. 우리는 그것이 무엇인지 모르겠지만 감속기를 전달해야합니다. 따라서 Reducer라는 기능 만 만들 것입니다. 상점의 초기 상태를 설정하는 두 번째 인수를 선택적으로 지정할 수 있습니다.

src/index.js

 "redux"에서 {configurestore} 가져 오기;<br> // 이것은 감속기입니다<br> const reder = () => {<br> / *뭔가 여기에 간다 */<br> }<br><br> // InitialState는 선택 사항입니다.<br> //이 데모의 경우 카운터를 사용하고 있지만 일반적으로 상태는 객체입니다.<br> const initialstate = 0<br> const store = configurestore (reder, initialstate);<br>

이제 우리는 상점의 변경 사항을 듣고 상점의 현재 상태를 console.log() 듣게됩니다.

 store.subscribe (() => {<br> Console.log ( "State Changed"Store.getState ());<br> })<br>

그래서 우리는 어떻게 매장을 업데이트합니까? Redux는 이런 일을하는 행동이라는 일이 있습니다.

액션/액션 제작자

작업은 또한 신청서에서 상점으로 정보를 보내는 평범한 JavaScript 객체입니다. 증분 버튼이있는 매우 간단한 카운터가있는 경우,이를 누르면 다음과 같은 것처럼 보이는 작업이 트리거됩니다.

 {<br> 유형 : "증분",<br> 페이로드 : 1<br> }<br>

그것들은 상점에 대한 유일한 정보 소스입니다. 상점의 상태는 행동에 대한 응답으로 만 변경됩니다. 각 동작에는 액션 객체의 의도가 무엇을하고 있는지 설명하는 유형 속성이 있어야합니다. 그 외에는 행동의 구조는 당신에게 완전히 달려 있습니다. 그러나 조치는 응용 프로그램 상태를 변환하는 데 필요한 최소 정보를 나타내므로 행동을 작게 유지하십시오.

예를 들어, 위의 예에서 유형 속성은 "증분"으로 설정되고 추가 페이로드 속성이 포함됩니다. 페이로드 속성의 이름을 더 의미있는 것으로 바꿀 수 있습니다.이 경우 완전히 생략 할 수 있습니다. 이와 같이 상점에 액션을 파견 할 수 있습니다.

 store.dispatch ({유형 : "증분", 페이로드 : 1});<br>

Redux를 코딩하는 동안 일반적으로 작업을 직접 사용하지 않습니다. 대신, 당신은 액션을 반환하는 함수를 호출 할 것이며, 이러한 기능은 널리 사용됩니다. 다음은 앞에서 논의한 증분 조치에 대한 액션 제작자입니다.

 const ycrementCount = (count) => {<br> 반품 {<br> 유형 : "증분",<br> 페이로드 : 카운트<br> }<br> }<br>

따라서 카운터의 상태를 업데이트하려면 다음과 같은 incrementCount 작업 조치를 발송해야합니다.

 store.dispatch (incrementCount (1));<br> store.dispatch (incrementCount (1));<br> store.dispatch (incrementCount (1));<br>

브라우저 콘솔로 가면 부분적으로 작동하는 것을 볼 수 있습니다. 우리는 아직 감속기를 정의하지 않았기 때문에 정의되지 않습니다.

이제 우리는 행동과 가게를 다루었습니다. 그러나 우리는 행동에 의해 제공된 정보를 변환하고 매장의 상태를 변환하는 메커니즘이 필요합니다. 감속기는이 목적을 달성합니다.

감속기

조치는 문제를 설명하고 감속기는 문제 해결을 담당합니다. 이전의 예에서, incrementCount 메소드는 우리가 주에 만들고자하는 변화 유형에 대한 정보를 제공하는 조치를 반환했습니다. Reducer는이 정보를 사용하여 실제로 상태를 업데이트합니다. 문서에서 Redux를 사용하는 동안 항상 기억해야 할 큰 요점이 있습니다.

동일한 인수가 주어지면, 감속기는 다음 상태를 계산하고 반환해야합니다. 놀라움이 없습니다. 부작용이 없습니다. API 호출이 없습니다. 돌연변이가 없습니다. 그냥 계산.

이것이 의미하는 바는 감속기가 순수한 기능이어야한다는 것입니다. 입력 세트가 주어지면 항상 동일한 출력을 반환해야합니다. 그 외에도 더 이상 아무것도하지 않아야합니다. 또한 Reducer는 Ajax 호출 또는 API에서 데이터를 가져 오는 것과 같은 부작용의 장소가 아닙니다.

카운터의 감속기를 채우자.

 // 이것은 감속기입니다<br><br> const reder = (state = initialstate, action) => {<br> 스위치 (action.type) {<br> 사례 "증분":<br> 상태 조치를 반환합니다<br> 기본:<br> 반환 상태<br> }<br> }<br>

REDICER는 2 개의 인수 (상태와 행동)를 받아들이고 새로운 상태를 반환합니다.

 (PreviousState, Action) => Newstate<br>

상태는 기본값 인 initialState 를 수락하며, 이는 주 값이 정의되지 않은 경우에만 사용됩니다. 그렇지 않으면 상태의 실제 가치가 유지됩니다. 스위치 문을 사용하여 올바른 작업을 선택합니다. 브라우저를 새로 고치면 모든 것이 예상대로 작동합니다.

카운터가 불완전하지 않고 DECREMENT 경우를 추가합시다.

 // 이것은 감속기입니다<br><br> const reder = (state = initialstate, action) => {<br> 스위치 (action.type) {<br> 사례 "증분":<br> 상태 조치를 반환합니다<br> 사례 "감소":<br> Return State -Action.PayLoad<br> 기본:<br> 반환 상태<br> }<br> }<br>

액션 제작자는 다음과 같습니다.

 const retementCount = (count) => {<br> 반품 {<br> 유형 : "감소",<br> 페이로드 : 카운트<br> }<br> }<br>

마지막으로, 상점에 파견하십시오.

 store.dispatch (incrementCount (4)); // 4<br> store.dispatch (DetrementCount (2)); // 2<br>

그게 다야!

요약

이 튜토리얼은 Redux를 사용하여 상태를 관리하기위한 시작점이되었습니다. 우리는 상점, 액션 및 리더스와 같은 기본 Redux 개념을 이해하는 데 필요한 모든 것을 다루었습니다. 튜토리얼이 끝날 무렵, 우리는 작동하는 Redux 데모 카운터도 만들었습니다. 그다지 많지는 않았지만 퍼즐의 모든 조각이 어떻게 어울리는 지 배웠습니다.

지난 몇 년 동안 React는 인기가 높아졌습니다. 실제로, 우리는 시장에 구매, 검토, 구현 등을 사용할 수있는 여러 품목이 있습니다. React 주변의 추가 리소스를 찾고 있다면 주저하지 말고 확인하십시오.

다음 튜토리얼에서는 여기에서 배운 것들을 사용하여 Redux를 사용하여 React 응용 프로그램을 만들 것입니다. 그때까지 계속 지켜봐주십시오. 의견에 당신의 생각을 공유하십시오.

위 내용은 Redux 시작 : 왜 Redux?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!