У React Props нет последних данных в магазине Redux с кнопкой браузера вперед

Question

В componentDidMount () , я запускаю действие, чтобы получить параметры реакции-маршрутизатора из URL-адреса с помощью matchPath () и сохраняю эти данные в хранилище с избыточностью.

Затем яиспользуйте эти данные для выполнения другого действия, основанного на этих параметрах (взятых из магазина).

Это прекрасно работает, если я использую внутренний реагирующий маршрутизатор <Link> на моем сайте - но если я использую свои кнопки вперед и назад, реквизиты в componentDidMount () aren 't обновление при сохранении данных маршрута в хранилище приставок.

Использование тегов Router Link - (вывод на консоль):

getRouterRouteParams action found route data:  {path: "/recipe/:recipeId/:woeType/:woe?", url: "/recipe/10054617/preset/test", isExact: true, params: {…}}

New route data saved to store.

Route data in componentDidMount from mapStateToProps:  {path: "/recipe/:recipeId/:woeType/:woe?", url: "/recipe/10054617/preset/test", isExact: true, params: {…}}

Нажатие «Назад»"then" Forward "с помощью кнопок браузера - (вывод на консоль):

getRouterRouteParams action found route data:  {path: "/recipe/:recipeId/:woeType/:woe?", url: "/recipe/10054617/preset/test", isExact: true, params: {…}}

New route data saved to store.

Route data in componentDidMount from mapStateToProps:  {path: "/recipe-feed/:f", url: "/recipe-feed/test", isExact: true, params: {…}}

Как видите, данные маршрута в componentDidMount из mapStateToProps по-прежнему содержат данные из предыдущего пути, а не текущий путь, несмотря на вывод в журнале моего действия, показывающий, что в нем хранятся данные для текущего пути.

ComponentDidMount

componentDidMount() {
    const { routeData, location, getRouterRouteParamsAction } = this.props;

    // Update routeData in redux store before any other actions can take place - since they are dependent on accurate route data
    getRouterRouteParamsAction(location.pathname);
    console.log("Route data in componentDidMount from mapStateToProps: ", routeData);

    ... other actions here
}

Действие

Поскольку это приложение для рендеринга на стороне сервера маршруты хранятся в централизованном файле (в случае, если вы не знакомы с тем, как SSR реагирует на маршрутизатор с некоторыми другими методами настройки).

import routes from "../../shared/components/App/routes.js";

export const getRouterRouteParams = (path) => {
    return (dispatch) => {
        let matchingRoute = routes.find(route => {
            return matchPath(path, route);
        });

        let routeData = matchPath(path, matchingRoute);
        console.log("getRouterRouteParams action found route data: ", routeData);

        dispatch({
            type: UPDATE_ROUTE_DATA,
            payload: routeData
        })

        console.log("New route data saved to store.");
    }
}

Это проблема с синхронизацией?Мои другие действия componentDidMount () действительно выполняются до завершения функции dispatch () действия, несмотря на, казалось бы, правильный порядок вывода console.log?

Если я загляну в мой redux-store (используя расширение chrome)Я вижу, что правильные значения из текущего URL-адреса на самом деле хранятся в избыточном хранилище ... Они просто не доходят до реквизита.

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

Должен ли я переопределить способ обработки кнопок «вперед» и «назад» в браузере?

Answer 1

Ну ... получается, что мне не нужно было делать свои собственные действия / редукторы для поиска и извлечения данных параметров маршрута, используя matchPath.

При использовании withRouter, match добавляется вреквизиты и доступны сразу.

componentDidMount() {
    const { match } = this.props;

    // Logs details about this route, including params
    console.log("Match Data: ", match);
}

Соответствующие документы:

• совпадение
• withRouter