React Redux网址更改事件/架构

Question

我正在用React构建应用程序。如果有人想搜索会发生以下情况：

1. 状态更新：this.props.Address.selectedAddress

2. 点击搜索按钮搜索事件是触发和我的网址改为：

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

工作正常。现在，我希望如果有人在应用程序中放入新的url，也会触发搜索事件。我做了什么至今：触发搜索和updateting selectedAddress：

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(); 

} 

现在的单击事件的URL改变了，结果列表组件认为它必须处理此事件的问题。

我真的认为这是一个糟糕的设计，我已经做到了。当然，我可以添加一个时间戳或类似的东西来判断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：还有一个备注 我试图做出反应路由器 - 终极版。它保存了url状态。但它没有解决问题。例如，如果我输入一个新的网址。然后，事件LOCATION_CHANGE被触发。但在此之后，我的persist/REHYDRATE事件被解雇。这样url就会变回来。这使得行为更加糟糕......

PPS：使其更清楚。一切正常。我想添加一个功能。如果用户自己输入一个新的url，那么如果他点击搜索按钮，应用程序应该以相同的方式处理。但它似乎是一个艰难的出价，因为在那种情况下，在我的应用程序中，重新水化事件被激发...

Answer 1

不知道如何减少持续（“补液”）的作品，所以也许我失去了一些至关重要的..但我想这可能是可能通过你的ResultsList部件连接到终极版解决您的问题，以便它通过反应路由器URL参数吧，这样的事情

// 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)) 
    }; 
}; 

（这样的代码应该是可能的according to these docs here）

然后，在ResultsList里，你可以启动搜索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从搜索页面。