쿼리 문자열을 사용하여 Redux/React Router에서 작업 트리거

Question

모달을 트리거하는 데 사용되는 로그인 작업을 만들었습니다.

export function showLogin() { 
    return dispatch => { 
    dispatch(loginShow()); 
    }; 
} 

감속기에서는 isActive 상태가 업데이트됩니다.

case actionNames.LOGIN_SHOW: 
    return Object.assign({}, state, { 
    isActive: true 
    }); 

isActive이 true이면 사용자 지정 모달 구성 요소를 조건부로 표시합니다.

<Modal 
    isActive={this.props.login.isActive} 
    hideModal={this.props.hideLogin} 
> 
    <LoginContainer /> 
</Modal> 

내가 지금하고 싶은 것은 모든 경로에서 검색어 문자열을 통해 모달을 트리거하는 것입니다. /some-slug?login=true.

반응 라우터 4를 사용하고 있지만이 작업을 수행 할 수 없다고 생각합니다. 각 구성 요소에서 쿼리 문자열을 확인하지 않아도되고 QS를 확인한 다음 관련 행동을 시작하십시오.

일부 검색을 수행했지만 해결책을 찾지 못했습니다. 각 경로 주변에 래퍼 구성 요소를 만든 다음 QS를 기반으로 관련 조치를 실행하는 switch 문을 통해이 구성 요소를 만들려고했습니다. 그래도 작동하는 것 같습니다.

<Route path="/" exact component={QueryStringWrapper(HomeContainer)} /> 

누구로부터 조언을받을 수 있습니까?

Answer 1

구성 요소에서 어딘가에 가져 와서 확인하기 전에 쿼리 링에서 직접 동작을 트리거 할 수 없습니다. 당신은 이것을 피할 수 없을지도 모릅니다. 로그인에 대해 독립적 인 구성 요소가있는 경우 쿼리 문자열을 확인 (또는 소품으로 수신)하고 액션을 호출할지 여부를 결정한 다음이 구성 요소를 앱으로 가져올 수 있으며 매번 쿼리 스트링을 검사합니다. 로그인이 앱의 동일한 구성 요소에있는 경우 구성 요소 인 WillMount에서 확인할 수 있습니다.

희망이 있습니다.