Question

可以使用查询字符串参数访问我的应用程序，该参数包含一些初始设置，例如?accountId=PL123454252。

完成后，我需要初始化商店，即将关联的帐户对象从查询字符串放入商店。

最初我是用包裹在例如withRouter(InitStoreFromQueryString )，但是最后我得到的组件只是不呈现任何内容，例如：<InitStoreFromQueryString />，而只是在componentDidMount上调度动作。这看起来很尴尬。

是否有更好的方法来实现相同的效果，即在启动应用程序时基于查询字符串参数初始化存储？

Answer 1

如果您使用的是React-Router，则可以使用history模块来跟踪位置更改。您可以向历史记录对象添加listener，并在位置更改时调度操作。

示例（未经测试）：

import createStore from "./store";
import createHistory from "history/createBrowserHistory";

const store = createStore();
const history = createHistory();

const unlisten = history.listen((location) => {
  const accountId = extractFromLocation(location.search); // extract the accountId from the location query
  if(store.getState().accounts[accountId]) return; // if in store do nothing
  store.dispatch(updateAccountData(accountId)); // update the store with the new account
});

根据查询字符串参数初始化存储

1 个答案: