Javascript 是否有一种方法可以使用React+在URL查询中存储部分应用程序状态；雷杜？

我正在使用React、Redux和React路由器。我想将大部分应用程序状态存储在redux存储中，并将其中的一些状态存储在URL查询中。我相信有两种方法可以做到这一点：

• 在每次状态更改后将redux存储与URL查询同步
• 不要在redux存储中存储“一些位”，而是使用某种方法（类似于减缩器的工作方式）来更改URL查询，就像它是另一个存储一样

我不确定第一种方法是否可行，因为序列化状态长度可能超过URL限制。所以我可能应该选择第二个

例如，我在一个页面上有几个复选框，我希望它们的状态（选中/未选中）反映在URL中，这样我就可以将我的URL链接发送给其他人，他们也会像我一样选中相同的复选框。因此，我将复选框呈现为：

export class MyComponent extends React.Component {

    handleCheckboxClick(...) {
        // Some magic function, that puts my urlState into URL query.
        updateUrlState(...)
    }

    render() {
        // 'location' prop is injected by react router.
        const urlState = getUrlState(this.props.location.query);  

        // Let's say 'checkboxes' are stored like so:
        // {
        //     foo: false,
        //     bar: true,
        // }
        const { checkboxes } = urlState;

        return (
            <div>
                { checkboxes.map(
                    (checkboxName) => <Checkbox checked={ checkboxes[checkboxName] } onClick={ this.handleCheckboxClick }>{ checkboxName }</Checkbox>
                )}
            </div>
        )
    }

}

导出类MyComponent扩展了React.Component{
HandleCheckBox单击（…）{
//一些神奇的函数，将我的urlState放入URL查询。
updateUrlState（…）
}
render（）{
//“位置”道具由react路由器注入。
const urlState=getUrlState（this.props.location.query）；
//假设“复选框”是这样存储的：
// {
//傅：错，
//酒吧：是的，
// }
const{checkbox}=urlState；
返回(
{checkbox.map(
（checkboxName）=>{checkboxName}
)}
)
}
}

我想要magic

updateUrlState

函数做的是获取当前URL查询，更新它（将某些复选框标记为选中），并将结果推回到URL查询

因为这个临时的URL状态可能是嵌套的和复杂的，所以它可能应该序列化并存储为JSON，所以生成的URL看起来有点像：

https://example.com/#/page?checkboxes={“foo”：false，“bar”：true}“

这可能吗？

请参考此

当复选框被选中/取消选中时，您可以简单地调度一个操作，该操作将使用

window.history.pushState（）

上面的第一个参数是当用户单击后退按钮时，浏览器将发出

popstate

事件，您可以使用该状态设置ui。看

然后，当其他用户粘贴url时，您只需解析url并在

componentDidMount

中的存储中设置正确的状态

function decodeUrl() {
  let params = window.location.href.replace(baseUrl, '');
  // parse your params and set state
}

---

仅供参考：URL不支持某些字符（例如“{”）。因此，您需要将它们解析为查询参数，或对其进行编码。如果我没有弄错您的问题，请尝试使用此工具。中间件有点像reduces，但它位于从操作到reducer的流程之间。此类用例的最佳示例是日志记录，我已经开发了中间件，它可以处理所有的remote请求。基本上，您可以在中间件中获得已调度的操作，在那里您可以对其进行分析。如果某个操作需要更改applycation的查询参数，您可以从那里调度新的操作

因此，您的代码可以如下所示：

const queryChanges = store => next => action => {
  if (/*here you test the action*/) {
    //here can change the url, or
    return dispatch(actionToTriggerURLChange());

  } else {
    return next(action);
  }
}

如果您既不调用

returnnext（action）

，也不分派新的，那么什么也不会发生，所以请记住这一点

---

看一看文档，找出中间件的所有工作方式，我想这种方法在这种情况下将是最»不重复的«。

这可能就是你要找的@EdmundLee，我已经对你的答案发表了评论，这不是我要问的。不重新加载就修改URL没有问题，我只是不想每次用户单击复选框时手动执行。我正在寻找类似redux Reducer的内容，但用于URL查询。@roboslone不确定您所说的类似redux Reducer的内容是什么意思。您可以调度操作并在状态更改时修改URL？@roboslone可能会帮助您。请参阅

syncHistoryWithStore

我最终以自己的方式编写了一个新的程序o将应用程序状态的一部分存储在URL中，URL不是中间件。

const queryChanges = store => next => action => {
  if (/*here you test the action*/) {
    //here can change the url, or
    return dispatch(actionToTriggerURLChange());

  } else {
    return next(action);
  }
}