Question

我希望能够在给定搜索参数网址时正确填充Redux状态。

目前我的流程如下：

搜索 - ＆gt;

<Redirect to={{
  pathname: '/search',
  search: `?item-name=${this.props.searchQuery}`
}} />

然后将其重定向到/search component = {SearchResults}

在SearchResults中，由于Redux操作调度GET请求，它能够获取从服务器查询的项目。

return axios.get(`/api/search?item-name=${itemName}`)
   .then(response => {
   let json = response.data;
   dispatch(requestItemsSuccess(json));
}).catch(error => {
   dispatch(requestItemsFailure(itemName));
});

因此，自从我连接它以来，该对象在Redux状态的搜索结果中可用。

function mapStateToProps(state) {
   return {
   // Gets the list of fetched items
   items: state.items.items
 };
}

如果我要给朋友https://mywebsite.com/search?item-name=foo我的“项目”状态将是空的，因为它没有完成所有被调度的操作，因此从技术上来说并没有从我的数据库中获取信息。

无论如何，我仍然可以在输入上面的网址时请求此项信息，同时仍然在客户端保留Redux / Routing功能吗？

Answer 1

这类似于说当您刷新页面https://mywebsite.com/search?item-name=foo时，您的axios电话不会被解雇。

你需要做的是创造这样的东西：

componentDidMount() {
  const {items} = this.props; // assuming you can check whether items is populated

  if (!items) {
    this.props.dispatch(
     makeSearchResultsAxiosCall(this.props.location.query.item-name)
    )
  }
     // use this.props.location.query to access the query parameter
}

如果页面刷新或有人直接导航到页面，那么应该触发请求。

Redux / React-Router - 能够使用客户端路由的参数发送URL

1 个答案: