ReactJS + Redux : (기능) 구성 요소 래퍼 + 디스패치 (상태) 하위 구성 요소가있는 무한한 렌더링 루프 구성 요소

Question

구성 요소 래퍼 및 하위 함수를 호출하는 자식 구성 요소가 무한 렌더링 루프를 만들었습니다.),하지만이 구성 요소가 다시 렌더링되어야하는 이유는 모르겠다. 왜냐하면 소도구가 변경되지 않기 때문이다.

래퍼 :

export default function(ComposedComponent){ 
    class Authenticate extends Component { 
     componentWillMount(){ 
      //If not logged in 
      if (!this.props.loggedIn){ 
       this.context.router.history.replace({ pathname: '/login' }); 
      } 
      console.log("Mount parent"); 
     } 
     render(){ 
      return(
        <ComposedComponent {...this.props} /> 
       ); 
     } 
    } 
    Authenticate.propTypes = { 
     loggedIn: PropTypes.bool.isRequired 
    } 
    // Provide router in context for redirect 
    Authenticate.contextTypes = { 
     router: PropTypes.object.isRequired 
    } 
    const mapStateToProps = state => ({ 
     loggedIn: state.user.loggedIn 
    }) 

    return connect(mapStateToProps)(Authenticate); 
} 

자식 요소 :

래퍼 경로 App.js에서 (PropsRoute 단지 추가적인 소품 전달) A와 integegrated된다

class InternalArea extends Component { 
    componentDidMount(){ 
     this.props.setTitle(this.props.title); 
     console.log("Mount child"); 
    } 

    render(){ 

     return(
      <div> 
       This is an internal area for logged in users. 
      </div> 
     ); 
    } 

} 
const mapDispatchToProps = dispatch => bindActionCreators({ 
     setTitle 
    }, dispatch) 

export default connect(
    null, 
    mapDispatchToProps 
)(InternalArea); 

:

<PropsRoute exact path="/internal-area" component={requireAuth(InternalArea)} title="Internal Area" /> 

분리 자식 구성 요소의 this.props.setTitle(this.props.title);은 루프 오류를 해결하지만이를 디스패치해야합니다. 이자형. 아니면 내가 옮겨야 하나? 왜 그것이 소품을 변경합니까?

Answer 1

마지막으로 기능적인 래퍼를 사용하지 않고 루프 구성 요소를 App.js의 하위 요소로받는 래퍼 (Wrapper) 구성 요소를 사용하여이 루프를 생성하지 않는 방법을 알아 냈습니다. 이 솔루션은 다음에서 제안됩니다 : https://www.cuttlesoft.com/infinitely-dispatching-actions-react-redux-react-router-v4/

그럼에도 불구하고이 루프가 만들어지는 이유를 100 % 이해하지 못합니다. 기능적 래퍼가 자식 컴포넌트에서 redux 액션을 디스패치하는 것으로 작동하지 않는 것처럼 보일지라도, 종종 리디렉션을 위해 제안 된 방법 인 것처럼 조금 혼란 스럽습니다.