Redux를 사용할 때 React 뷰에 일부 조건부 코드를 유지하는 것이 반대 패턴입니까?

React를 사용하는 것이 상당히 편하지만 Redux를 사용할 때 올바른 방법이 무엇인지 혼란 스럽습니다. 모두가 자신의 방식으로 일을하는 것처럼 보입니다. 버튼을 클릭하면 다음과 같은 반응보기에서 메소드를 호출합니다.Redux를 사용할 때 React 뷰에 일부 조건부 코드를 유지하는 것이 반대 패턴입니까?

handleClick(value) { 
    this.props.action.handleValueChange(value); 
}

이제이 버튼을 클릭 할 때 훨씬 더 많은 작업을 수행하고 싶습니다. 따라서 트리거 된 동작이나 메서드 자체에서 이러한 작업을 수행해야합니까?

handleClick(value) { 
    this.props.action.handleValueChange(value); 
    // is this fine? 
    if(this.props.someValue === "somethign") 
    this.props.action.fetchSomeData(value); 
}

나는 깡통을 사용하여 액션 크리에이터 자체에서이 작업을 수행 할 수 있지만 그런 일을하는 권장 방법은 무엇입니까?

출처

2017-10-09 aks

mapDispatchToProps를 사용하면 모든 액션을 보내고 덤프를 사용하여 비동기 API 호출을 추가로 전달할 수 있습니다. 감사합니다. –

당신을 이해한다면 'handleClick'메서드에서 무엇을하고있는 것이 더 낫지가? – aks

mapDispatchToProps를 사용하여 소품으로 작업을 매핑하면 유지 보수가 쉽고 읽기 쉬운 코드를 쉽게 얻을 수 있다고 생각합니다. 그래서 네 handleClick 귀하의 행동에 구성 요소 특정 코드를 추가하지 않는 것이 더 좋아 보인다. –

단일 책임과 순수한 기능으로 생각하십시오. 이 메서드는 클릭을 처리하고 릴레이 경주에서 배턴을 건네주는 것과 같이 다음 후프로 변환해야합니다. 클릭하면 동작이 발생하거나 상태가 변경 될 수 있습니다. 당신은 당신이 단어를 사용하기 시작하고 (이 모듈화하여 배트맨 신호처럼) 때 일이 너무 논리 무거운를 받고 때 시간을 알 수 있습니다

가져 오기 사용자 입력
및 구성 요소 상태로 저장
및 행동 작성자
를 호출하고 다시
을 반응을 얻고 새로운 상태로
을 그 사항을 저장하고보기를 다시 렌더링

수행해야 할 각 작업을 호출 할 수있는 모든 기능을 "멍청한"기능으로 만드는 것을 고려하십시오. 그들이 머물러있는 곳은 당신에게 달린 것입니다. 데이터베이스 호출에 대한 학습과 데이터로 수행하는 작업을 신경 쓰지 않는 "멍청한 모델"을 기억할 때와 똑같은 논리로, 요청 된 내용을 정확하게 얻을 수 있습니다. 사용자에게 "get user id 1337"과 같은 입력을주고 그들은 "here {}"또는 "no"로 응답합니다. 그들에게는 하나의 책임이 있으며, 주위의 모든 것을 리팩토링하면, "id로 사용자를 얻으세요"라는 메시지가 더 이상 충분하지 않을 때까지 그들의 입장을 유지합니다.

순수성을 목표로한다면 앱을 멋지게 모듈화 할 수 있습니다. 클래스에서 멋지게 분할 된 메서드로 표시되거나 각 함수를 가져올 수 있습니다. 더 읽고 싶다면 함수형 프로그래밍에 대한 고급 기사와 비디오가 많이 나옵니다. 그들에게 중요한 것을 들어라. 재사용 가능한 많은 코드 조각들이 모여있는 위대한 모듈러 아키텍처를 사용할 수 있습니다. 그것은 기능적인 구성이지만 객체 구성이기도합니다. 당신이 원하는 경우 하나의 클래스에서 전체 앱을 만들 수 있기 때문에 이러한 것들은 결코 React에서도 중요하지 않습니다. :)

Redux-thunk는 앱 수준 상태이기 때문에 적합합니다. 컨테이너 상태가 아닌 구성 요소 수준도 있습니다. 소품을 벙어리 구성 요소에 전달하면이 소품을 "상태"로 사용하므로 자식 # 2와 유사합니다. 나는 당신이 계층 구조에 대해 생각하고 있다고 믿는다. 한 차원에서 다른 차원으로 이동하면 논리가 과도하게 확장 될 수 있습니다. 로직이 필요로하는 것이 무엇인지 물을 수 있으며 별도의 핸들러가 핸들러를 데이터에 연결할 수 있습니다.

나는 데이터를 데이터베이스에서 다시 가져올 때 이벤트 리스너를 찾기 위해 직관적으로 handleClick을 보지 않을 것이라고합니다. 50-100 라인보다 긴 모든 것은 꽤 잔인하고 오랫동안 누군가를 통해 읽을 것을 요구하고 있습니다.나중에 다시 돌아와 맨 위를 맨 아래에 연결하면 다른 사람이 스파게티라고 부를 수도 있지만 이벤트 당 하나의 기능 당 하나의 파일이있는 경우에는 사용할 수 없습니다 (모든 기능에는 하나의 작업이 있고 모든 오브젝트에는 용도가 하나 있습니다).).

나는 이와 비슷한 것을 말하고있는 것이 아닙니다. 저는 모듈러가 확장, 유지 보수 및 리팩터링을 쉽게하기 때문에 왕이라고 말합니다. 코드를 볼 때 단기간의 메모리를 흡수하고 프런트로드해야 할 필요가 적을수록 더 많이 즐기게 될 것입니다. 여기

내 의견이 선호 샘플 디렉토리 트리이고, 난 안 정확한 솔루션, 생각하는 방법을 보여 희망 : 이제

components/ 
    auth/ 
     auth_actions.js 
     auth_types.js 
     auth_reducer.js 
     LoadingSpinner.js 
     LoginForm.js 
     SignupForm.js 
     SplashScreen.js 
queries/ 
    mongodb_checkIfEmailExists.js 
    mongodb_getUserById.js 
    neo4j_getUserByNodeId.js

, 당신의 친구가 당신과 함께 노력하고 상상. 로그인보기에서 작업 중이며 대시 보드보기에서 작업 중입니다. 동시에 작업하는 동안 파일 충돌이 발생하지 않습니다. 또한 파일을 보자 마자 무슨 일이 일어나고 있는지 꽤 잘 알고있을 것입니다. 또한 모든 가져 오기 항목이 ../../../actions이 아닌 ./Something 인 것을 확인할 수 있습니다.

나는 이것이 정확한 해결책이 아닌 사고 스타일을 설명하기를 바랍니다.

출처

2017-10-09 07:15:04 agm1984

Redux를 사용할 때 React 뷰에 일부 조건부 코드를 유지하는 것이 반대 패턴입니까?

답변

관련 문제