Инициализировать хранилище на основе параметров строки запроса

Question

Мое приложение может быть доступно с параметрами строки запроса, которые содержат некоторые начальные настройки, например, ?accountId=PL123454252.

Когда это будет сделано, мне нужно инициализировать хранилище, т.е. поместить связанный объект учетной записи из строки запроса в хранилище.

Первоначально я сделал это с компонентом, например, в оболочке. withRouter(InitStoreFromQueryString ), однако я получил компонент, который просто ничего не отображает, например: <InitStoreFromQueryString /> и просто отправляет действия на componentDidMount. Это выглядит очень неловко.

Есть ли лучший способ добиться того же эффекта, то есть инициализировать хранилище на основе параметров строки запроса при загрузке приложения при запуске?

Answer 1

Если вы используете реагирующий маршрутизатор, вы используете модуль 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
});