왜 단지 redux뿐만 아니라 redux를 사용합니까?

Question

최상위 애플리케이션 컴포넌트 생성자 메소드에 REDUX 저장소에 등록 : 그것은 소품으로 하위 구성 요소 상태의 부분을 통과

constructor() { 
    super() 
    this.state = store.getState() 
    store.subscribe(() => { 
    this.setState(store.getState()) 
    }) 
} 

.

<button onClick={() => { 
    store.dispatch({type: 'INCREMENT'}) } 
}>increment</button> 

은 무엇이 설정을 통해 react-redux을 사용하는 장점이 될 것이다 : 일부 하위 구성 요소 상태를 업데이트 할 필요가있는 경우, 그냥 작업을 전달? 즉, 왜 react-redux이 필요합니까?

Answer 1

요점은 관심사의 분리입니다. react-redux을 사용하면 구성 요소가 액세스하고 변경해야하는 상태 부분 만 액세스하고 변경할 수 있습니다.

당신이 필요가 있는지 당신이 돌아 오는에 만드는 모든 가입에 상관없이, 모든 상태 변화에 호출 얻을 것이다 :

룩스의 댓글이 가장 내 질문에 대한 대답, 그래서 여기 (강조 광산) 붙여 넣을 수 있습니다 @

해당 상태 슬라이스에서 작동하는지 여부. react-redux은 우리가 가게 특정 구성 요소의 일부에 가입해야하는에서 지정할 수 있으며, 따라서 우리는 변화에 "구독"우리는

Answer 2

구성 요소 트리가 그다지 깊지 않으면 올바른 것입니다. 장점은 분명하지 않습니다. 그러나 간단한 예제가 아닌 대부분의 React 앱은 특히 많은 구성 요소를 함께 구성 할 때 긴 나무가 빨리 나타납니다.

는

App -> HomePage -> BlogContainer -> PostList -> Post -> CustomCard -> Card -> LikeButton 

및 LikeButton 구성 요소가 현재 선택된 게시물에 대한 액세스를 필요로가는 나무에 혈통이 있고, 그 게시물의 같은 수를 업데이트하는 작업을 파견하고 싶습니다 상상해보십시오.

설정에서 App과 LikeButton 사이의 모든 구성 요소는 절대로 사용하지 않더라도 해당 정보를 전달해야합니다. react-redux의 connect 기능을 사용하면 LikeButton을 redux 상점에 직접 연결할 수 있으며 dispatch에 액세스 할 수 있습니다. YMMV,하지만 일반적으로 이것은 좋은 패턴을 활용하는 것입니다.

Answer 3

여러 가지 이유.

첫째, Redux FAQ answer on connecting multiple components 당 : 돌아 오는 예에서

강조 "상단에 하나 개의 컨테이너 구성 요소"실수였다. 이것을 격언으로 생각하지 마십시오. 프레젠테이션 구성 요소를 별도로 유지하십시오. 컨테이너 구성 요소를 편리하게 연결할 수 있도록 컨테이너 구성 요소를 만듭니다. 같은 종류의 자식에 대한 데이터를 제공하기 위해 부모 구성 요소에 코드를 복제하는 것처럼 느낄 때마다 컨테이너 추출 시간. 일반적으로 부모가 자녀의 "개인적인"데이터 나 행동에 대해 너무 많이 알고있는 즉시 컨테이너를 추출 할 시간입니다. 즉

는 의미있는 응용 프로그램 구성 요소 트리의 다양한 장소에서 많은 연결 구성 요소가됩니다.

더 많은 연결된 구성 요소는 주어진 구성 요소의 역할에 대해 추론하기 쉽다는 것을 의미합니다. 국가가 필요로하는 데이터와 파견하려는 액션을 선언하고, 루트에서 소품을 가져올 필요가 없습니다.

또한 더 많은 연결 구성 요소를 사용하면 전반적인 성능이 향상되는 것으로 나타났습니다. mapState 호출의 비용은 낭비되는 재 렌더링을 수행하는 구성 요소가 적음으로 인해 더 많은 것으로 나타났습니다.

그 다음에 계속되는 : 반작용-돌아 오는 그것으로 넣어 최적화 작업 많은 있었다 (그리고 곧 React-Redux v5 주요 성능 향상과 함께 완전한 내부 재 작성)입니다.당신이 당신의 UI를 구축에 반응-돌아 오는 그 connect 기능을을 를 사용한다 즉

, 당신이 돌아 오는 반응 사용하는 경우.

Answer 4

당신은 돌아 오는을 통해 그것을 아직도 모든 구성 요소에 대한 업데이트를 방지 할 수 있습니다합니다. 예, 현재 구성 요소를 업데이트해야하는지 여부를 결정할 수 있습니다. 다음은 샘플 코드입니다

반응-REDUX 라이브러리와 같은 일이와 전자의 경우 유사한 여러 다른 구성 요소가 그래서 상상

const mapStateToProps = (state) => { 


return { 
    todos: getVisibleTodos(
     state.todos, 
     state.visibilityFilter 
    ) 
    }; 
}; 

const mapDispatchToProps = (dispatch) => { 
    return { 
    onTodoClick: (id) => { 
     dispatch({ 
     type: 'TOGGLE_TODO', 
     id 
     }); 
    } 
    }; 
}; 

const { connect } = ReactRedux; 
const VisibleTodoList = connect(
    mapStateToProps, 
    mapDispatchToProps 
)(TodoList); 

으로 수행 this.forceUpdate() 및 this.unsubscribe() 호출됩니다

class VisibleTodos extends Component{ 
    componentDidMount(){ 
     this.unsubscribe = store.subscribe(() => { 
      this.forceUpdate(); 
     }); 
    } 

    componentWillUnmount() { 
     this.unsubscribe(); 
    } 


    render(){ 


     const state = store.getState(); 

     return(
      <TodoList 
       todos = {getVisibleTodos(
        state.todos, 
       state.visibilityFilter 
      )} 
       onTodoClick = {id => { 
        store.dispatch({ 
         type: 'TOGGLE_TODO', 
        id 
       }) 
       }} 
      > 
      </TodoList> 
     ) 
    } 
} 

것 중복 될 수있다. 따라서 수동 작업에서 우리를 구할 수 있습니다.