React-Redux : 모든 구성 요소 상태가 Redux Store에 유지되어야 함

간단한 토글이 있다고 가정 해 보겠습니다.

버튼을 클릭하면 색상 구성 요소가 빨간색과 파란색으로 바뀝니다.

나는 이와 같은 일을함으로써이 결과를 얻을 수있다.

index.js

Button: onClick={()=>{dispatch(changeColor())}}
Color: this.props.color ? blue : red

container.js

connect(mapStateToProps)(indexPage)

action_creator.js

function changeColor(){
 return {type: 'CHANGE_COLOR'}
}

reducer.js

switch(){
case 'CHANGE_COLOR':
return {color: true}

그러나 이것은 jQuery, 일부 클래스 및 일부 CSS를 사용하여 5 초 만에 달성 할 수있는 작업을 작성하기위한 엄청난 코드입니다.

그래서 제가 정말로 묻는 것은 여기서 제가 뭘 잘못하고있는 것일까 요?

Redux는 주로 "애플리케이션 상태"를위한 것입니다. 즉, 애플리케이션 로직과 관련된 모든 것입니다. 그 위에 구축 된 뷰는 해당 상태를 반영하지만 모든 작업에 해당 상태 컨테이너를 독점적으로 사용할 필요는 없습니다.

다음 질문을하십시오.이 상태가 나머지 신청서에 중요합니까? 애플리케이션의 다른 부분이 해당 상태에 따라 다르게 작동합니까? 많은 사소한 경우에는 그렇지 않습니다. 드롭 다운 메뉴 가져 오기 : 열려 있거나 닫혀 있다는 사실은 앱의 다른 부분에 영향을 미치지 않을 것입니다. 따라서 매장에 연결하는 것은 아마도 과잉 일 것입니다. 확실히 유효한 옵션이지만 실제로 어떤 이점도 얻을 수는 없습니다. this.state하루를 사용 하고 부르는 것이 좋습니다 .

특정 예에서 버튼이 토글되는 색상이 응용 프로그램의 다른 부분에서 차이를 만들 수 있습니까? 응용 프로그램의 주요 부분에 대한 일종의 전역 켜기 / 끄기 토글이라면 확실히 상점에 속합니다. 그러나 버튼을 클릭 할 때 버튼 색상 만 토글하는 경우 색상 상태를 로컬에서 정의한 상태로 둘 수 있습니다. 버튼을 클릭하는 동작은 동작 전달이 필요한 다른 효과를 가질 수 있지만, 그것은 어떤 색이어야하는지에 대한 간단한 질문과는 별개입니다.

일반적으로 애플리케이션 상태를 가능한 한 작게 유지하십시오. 거기에 모든 것을 넣을 필요는 없습니다 . 필요하거나 거기에 무언가를 유지하는 것이 합리적 일 때 그것을하십시오. 또는 Dev Tools를 사용할 때 삶을 더 쉽게 만들 수 있습니다. 그러나 그 중요성을 너무 많이 과부하시키지 마십시오.

Redux FAQ : 정리하기
redux 공식 문서의이 부분이 질문에 잘 답했습니다.

로컬 구성 요소 상태를 사용하는 것이 좋습니다. 개발자는 어떤 종류의 상태가 애플리케이션을 구성하고 각 상태가 어디에 있어야하는지 결정하는 것이 귀하의 임무입니다. 자신에게 맞는 균형을 찾아 함께 사용하십시오.

Redux에 어떤 종류의 데이터를 넣어야하는지 결정하기위한 몇 가지 일반적인 경험 규칙 :

• 애플리케이션의 다른 부분이이 데이터에 관심이 있습니까?
• 이 원본 데이터를 기반으로 추가 파생 데이터를 생성 할 수 있어야합니까?
• 여러 구성 요소를 구동하는 데 동일한 데이터가 사용됩니까?
• 이 상태를 주어진 시점으로 복원 할 수있는 가치가 있습니까 (예 : 시간 여행 디버깅)?
• 데이터를 캐시 하시겠습니까 (즉, 다시 요청하는 대신 이미있는 경우 상태를 사용)?

@ AR7에서 제공하는 훌륭한 링크를 강조하기 위해, 그 링크가 잠시 뒤로 이동했기 때문에 :

전역 적으로 앱에 중요하지 않고 복잡한 방식으로 변경되지 않는 임시 상태에 React를 사용합니다. 예를 들어, 일부 UI 요소의 토글, 양식 입력 상태. 전역 적으로 중요하거나 복잡한 방식으로 변형 된 상태에 Redux를 사용합니다. 예를 들어, 캐시 된 사용자 또는 게시물 초안입니다.

때로는 Redux 상태에서 React 상태 (Redux에 무언가를 저장하는 것이 어색 해짐)로 이동하거나 그 반대 (더 많은 구성 요소가 로컬이었던 상태에 액세스해야하는 경우)를 원할 것입니다.

경험의 법칙은 : 덜 어색한 일을하는 것입니다.

Dan Abramov : https://github.com/reactjs/redux/issues/1287#issuecomment-175351978

예, 모든 구성 요소 상태를 Redux 에 저장하는 것이 좋습니다. 그렇게하면 시간 여행 디버깅 및 재생 가능한 버그 보고서와 같은 Redux의 많은 기능을 활용할 수 있습니다. 그렇지 않으면 해당 기능을 완전히 사용 하지 못할 수 있습니다 .

Redux에 구성 요소 상태 변경을 저장 하지 않을 때마다 해당 변경 사항은 Redux 변경 스택에서 완전히 손실되고 애플리케이션 UI가 저장소와 동기화되지 않습니다. 이것이 중요하지 않다면 왜 Redux를 사용하는지 스스로에게 물어보십시오. 그것 없이는 응용 프로그램이 덜 복잡해질 것입니다!

성능상의 이유로 this.setState()많은 작업을 반복적으로 전달하는 모든 항목 으로 대체 할 수 있습니다 . 예 : 사용자가 키를 입력 할 때마다 입력 필드의 상태를 Redux에 저장하면 성능이 저하 될 수 있습니다. 이를 트랜잭션처럼 처리하여 해결할 수 있습니다. 사용자 작업이 "커밋"되면 Redux에 최종 상태를 저장합니다.

귀하의 원래 게시물은 Redux 방식이 어떻게 "작성해야 할 코드가 엄청나게 많은지"언급하고 있습니다. 예.하지만 로컬 구성 요소 상태와 같은 일반적인 패턴에 추상화를 사용할 수 있습니다.