Question

我对react-redux环境还很陌生。

在我的应用程序中使用react-boilerplate。

我正在尝试找到正确的方式来将一些redux状态变量与查询参数同步，以便可以与其他人共享链接。

通过redux-query-sync，但不再得到维护。

我要与URL查询参数同步的是搜索查询字符串和过滤器。

请提出一种在我正在使用的样板中实现此目的的好方法。

-谢谢

Answer 1

由于没有库可以执行此操作，因此我想出了自己的方式希望对您有所帮助。这不是最有效的方法，所以请随时向我提出更好的建议。

步骤1： 捕获状态更改：

为此，所有相关组件都应放在单个容器中，并使用以下命令捕获状态更改：

componentDidUpdate(prevProps, prevState, snapshot) {
    if (JSON.stringify(prevProps.search.queryString) !== JSON.stringify(this.props.search.queryString)){
       // make sure to use escape to build the queryParams variable
       this.props.history.push(queryParams, null);
    }
}

步骤2：在reducer.js（如果有的话）中刷新页面时获取状态

使用像query-string

这样的优质解析器

import queryString from 'query-string';
const params = queryString.parse(history.location.search);

步骤3：将必需的状态变量加载到componentDidMount

在装入该组件时，需要将一些状态变量加载到状态中，在这种情况下（如果您要使用的话）可以使用componentDidMount

在react-redux中同步查询参数和状态变量

1 个答案: