redux-saga에서 props.location 객체에 액세스

Question

API 호출을 할 때 redux-saga 내의 this.props.location.pathname에 액세스하는 것이 최종 목표입니다. 여기에 내 현재 작업 솔루션, 비록 오류를 일으키는 반응. 내 코드베이스로 mxstbr/react-boilerplate-brand을 사용하고 있습니다.

내 랩핑 구성 요소에 App, 내 렌더링 메서드에 다음 줄이 있습니다.

render() { 
    this.props.onUpdateLocation(this.props.location) 
} 

내 mapDispatchToProps에는 다음과 같은 내용이 있습니다. 기본적으로 난 그냥 반작용 가게에 this.props.location을 절약 해요 : 내 redux-saga 내부

function mapDispatchToProps(dispatch) { 
    return { 
    onUpdateLocation: (location) => { 
     dispatch(updateLocation(location)); 
    }, 
    dispatch, 
    }; 
} 

나는 상태에서 위치에 액세스 할 필요로 그냥 사용; 그러나 여기에 React raises라는 오류가 있습니다.

warning.js:44 Warning: setState(...): Cannot update during an existing state transition (such as within `render` or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to `componentWillMount`. 

응용 프로그램이 시작될 때 한 번만 트리거됩니다 때문에 componentWillMount에 넣을 수없고, this.props.location가 render 방법으로 업데이트되는 때문에 componentWillUpdate에 넣어 수 없습니다. 너무 늦기 때문에 나는 그것을 componentDidUpdate에 넣을 수 없다.

내 redux-saga 내부의 반응 라우터 위치에 쉽게 접근 할 수있는 방법이 없습니까? 만약 <Route path='profile' component={ Profile } /> 있는 경우

Answer 1

프로필 성분의 ownProps 번째 인자에 반응 라우터 소품 액세스 할 수

mapStateToProps(state, [ownProps])와 mapDispatchToProps(dispatch, [ownProps])

Answer 2

TL; DR 께 :

export class App extends React.Component { 
    componentWillMount() { 
    this.props.onUpdateLocation(this.props.location.pathname); 
    } 
    componentWillReceiveProps(nextProps) { 
    this.props.onUpdateLocation(nextProps.location.pathname); 
    } 
    render() { 
    // Render stuff here 
    } 
} 

function mapDispatchToProps(dispatch) { 
    return { 
    onUpdateLocation: (location) => { 
     dispatch(updateLocation(location)); 
    }, 
    dispatch, 
    }; 
} 

내 감속기가 작업을 수신하고 location을 상태로 업데이트합니다. 이제 상태에서 location을 잡는 선택기를 사용하여 현재 경로 이름에 액세스 할 수 있습니다.

긴 답변 :

IGL의 대답은 아주 좋은 정보를, 당신이 경로에서 사용할 수있는 및 mapDispatchToProps의 ownProps PARAM에 의해 반환되는 정보를 명명 특히 와일드 카드입니다. 다음은 내가이 문제를 해결 한 방법입니다 ...

처음에는 경고가 this.props.location 또는 다른 것으로 액세스하려고한다고 생각했습니다. 그러나 훨씬 더 간단한 문제였습니다. React는 클릭과 같은 동작으로 인해 함수를 호출하지 않을 때이를 좋아하지 않습니다. 해결책을 제안하는 경고 메시지는 올바른 방향으로 나를 이끌었습니다.

무엇이 언제 어디에서 발생했는지 확인하려면 먼저 각 라이프 사이클 기능을 내 코드에 배치하고 콘솔 로깅시 콘솔 로깅을 수행하십시오. componentWillMount, componentDidMount, componentWillReceiveProps, shouldComponentUpdate, componentWillUpdate, componentDidUpdate, componentWillUnmount.

처음 페이지로드시 componentWillMount이 실행되고 각 탐색에서 componentWillReceiveProps이 실행되는 것을 발견했습니다. 이를 염두에두고 나는 this.props.location을 기록하고 componentWillReceiveProps에 여전히 이전 위치가 있음을 알았습니다. 그러나 새 위치가있는 하나의 매개 변수 nextProps이 필요합니다. 그래서, nextProps.location 내가 원하는 것입니다. 이것을 다른 컨테이너를 자식으로 사용하는 App 컨테이너에 넣었습니다. 이제 API 호출을 수행 할 때 내 사가에서 현재 위치에 액세스 할 수 있습니다.