Question

我正在使用React 16.4.1，React Router 4.3.1和React Redux 5.0.7。我有一条搜索路线，可以接收如下查询参数：

要清楚，React Router 4 discontinued support for location.query，所以我们不得不从React Router提供的location.search道具中手动解析查询参数。为此，我们可以使用Javascript的URLSearchParams接口之类的东西。

因此，我希望用户能够访问上面的URL，并立即开始搜索“ foo”。因此，我需要在页面加载期间的某个时刻收集q参数。但是什么时候？

我的第一个直觉是让我的Search组件在其componentDidMount生命周期挂钩期间解析查询参数。推荐的钩子也恰好是从服务器中检索数据的钩子，如果q参数具有值，我会这样做。

但是我也考虑过将逻辑完全在组件外部移至通常在页面加载时运行的JS文件中，例如我的应用程序的index.js文件。我可以访问我的Redux存储，并可以使用“ searchText”更新应用程序状态，然后我的Search组件可以在安装时简单地检查该道具（通过Redux接线）。

考虑到React Router在版本4之前为我们处理过，从页面加载时的URL收集查询参数-然后对它们采取行动-对于React开发人员来说是一个相对较新的问题。但是，当然，我不是第一人自版本4发布以来就必须这样做。是否有既定的模式或最佳做法？

谢谢。

Answer 1

我的方法是沿着动作，reduces等创建一个初始化文件夹，并在其中创建类似的功能

export default (dispatch, getState) => {
    dispatch(urlQueryParams());
    // Some other initializers
};
const urlQueryParams = () => {
    // return json to reducer with the params
}

然后在主索引文件上可以触发它

import addQueryParamsInitialzer from 'redux/initialize/queryParam';

const store = configureStore(INITIAL_STATE);
addQueryParamsInitialzer(store.dispatch, store.getState);

这样，无论您使用的是什么组件，都可以将其存储在商店中

在组件生命周期中何时应该从URL获取查询参数？

1 个答案: