Reux Redux Url 이벤트/아키텍처 변경

Question

React로 애플리케이션을 구축 중입니다.

1. 상태가 업데이트 : 누군가가 다음을 검색하고자하는 경우 발생하는 검색 버튼을 this.props.Address.selectedAddress

2. 을 클릭하여 검색 이벤트가 트리거입니다 내 URL이 변경됩니다 :

   this.props.handleSearch(address); 
   let city = format_city(this.props.Address.selectedAddress); 
   browserHistory.push('/searchfor/'+city); 
   

잘 작동합니다. 이제 누군가가 응용 프로그램에 새 URL을 넣으면 검색 이벤트가 시작되기를 바랍니다. 나는 지금까지 무엇을했는지 : 트리거 검색 및 updateting selectedAddress을 : 클릭 이벤트가 url 및 결과 목록 구성 요소는이 이벤트를 처리 할 생각을 변경

class ResultsList extends React.Component { 
constructor(props) { 
    super(props); 
} 

componentDidMount() { 
    this.unlisten = browserHistory.listen((location) => { 
     console.log('route changes'); 
     if (this.selectedAdressNOTMatchUrl()){ 
      this.handelAdressSearch() 
     } 

    }); 

} 
componentWillUnmount() { 
    this.unlisten(); 

} 

이제 문제.

저는 정말 어떻게했는지 나쁜 디자인이라고 생각합니다. 물론 타임 스탬프 나 이와 비슷한 것을 추가하여 browserHistory.push ('/ searchfor /'+ city); URL 변경 이벤트가 시작되기 바로 전에 발생하지만, 약간 추한 것입니다.

모든 아이디어는 높이 평가됩니다.

여기 내 설정이다 :

export const store = createStore(
reducers, 
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(), 
compose(
    applyMiddleware(
     thunkMiddleware, 
     promiseMiddleware()), 
    autoRehydrate() 
) 
); 

const persistor = persistStore(store, {storage: localForage}); 
render(
<Provider store={store} persistor={persistor}> 
    <Router history={browserHistory}> 
     <Route path="/" component={Home}/> 
     <Route path="/searchfor/:city" component={Suche}/> 
    </Router> 
</Provider>, 

PS : 나는 반응-라우터 REDUX을 시도 하나 더 말 . 그것은 URL 상태를 저장합니다. 그러나 그것은 문제를 해결하지 못합니다. 예를 들어 새로운 URL을 입력하면 그런 다음 LOCATION_CHANGE 이벤트가 발생합니다. 하지만 그 후에는 내 지속/REHYDRATE 이벤트가 시작됩니다. 그래서 URL이 다시 바뀝니다. 그것은 행동을 더욱 악화시킵니다. ...

PPS : 더 명확하게 말하십시오. 모든 것이 잘 작동합니다. 한 가지 기능을 추가하고 싶습니다. 사용자가 새 URL을 직접 입력하면 검색 버튼을 클릭 한 경우 응용 프로그램에서 동일한 방식으로 처리해야합니다. 하지만 그것은 내 신청서에 rehydrate 이벤트가 해고 된 이후로 열심히 입찰가 인 것 같습니다 ...

Answer 1

어떻게 redux-persist ("rehydrating")가 작동하는지 잘 모르는 뭔가 중요한 것입니다 ..하지만 그것이 있어야, 그것을이 코드

// ownProps is be the props passed down from the Route, including path params 
const mapStateToProps = (state, ownProps) => { 
    return { 
    searchTerm: ownProps.city, // the url param 
    results: state.searchResults // after a manual url entry this will be undefined 

    } 
} 

const mapDispatchToProps = (dispatch) => { 
    return { 
    handleSearch: searchTerm => dispatch(searchAction(searchTerm)) 
    }; 
}; 

(그런 종류의 같은를 반응 라우터, URL 매개 변수를 전달하도록 나는 돌아 오는에 ResultsList 구성 요소를 연결을 통해 문제를 해결하는 것이 가능할 수있다 생각하고 있어요 가능 according to these docs here)

그런 다음 ResultsList 내부에서 searc를 시작할 수 있습니다 h. 구성 요소가 없을 것

componentDidMount() { 
    const {searchTerm, handleSearch} this.props; 

    handleSearch(searchTerm); 
    } 
} 

render() { 
    const {results} = this.props; 
    return !results ? 
    <p>Loading..</p> : 
    <div> 
    { results.map(renderResultItem) } 
    </div> 
} 

그 방법은 URL-PARAM가 수동으로 입력 한 URL에서 온 경우 신경, 또는 검색 페이지에서 프로그램 추진 URL에서합니다.