0

我有一个非常简单的项目，您可以在以下位置找到：

https://codesandbox.io/s/issue-looping-between-last-2-routes-xhxu1

存档：/src/store/middlewares.ts我有以下中间件：

import { Dispatch, Middleware, AnyAction } from "redux";
import { RootState } from "./rootReducer";
import { createStandardAction } from "typesafe-actions";

export const sendMessage = createStandardAction("message/SEND")<string>();

export const locationMiddleware: Middleware<
  {},
  RootState,
  Dispatch<AnyAction>
> = store => next => action => {
  if (action.type === "@@router/LOCATION_CHANGE") {
    store.dispatch(sendMessage("BEFORE D-DAY")); // <--- THIS LINE IS CAUSING THE ISSUE
    const result = next(action);
    store.dispatch(sendMessage("AFTER D-DAY"));
    return result;
  } else {
    return next(action);
  }
};

export const messageMiddleware: Middleware<
  {},
  RootState,
  Dispatch<AnyAction>
> = store => next => action => {
  if (action.type === "message/SEND") {
    console.log("Message: ", action.payload);
  }
  return next(action);
};

正如你所看到的，@@router/LOCATION_CHANGE我每次发送两个动作，并在另一个中间件上捕获一条消息：messageMiddleware然后我console.log用它们做一个。这些操作在调用之前和之后调度：next(action)。

我面临的问题是 line: store.dispatch(sendMessage("BEFORE D-DAY"));。

启用该行后，您可以执行以下步骤来重现该问题：

  1. 在根位置打开应用程序（又名Page 01：）
  2. 点击链接：Page 02
  3. 点击链接：Page 03
  4. 单击返回按钮（您将被重定向到Page 02：）
  5. 单击后退按钮（您将被重定向到：Page 03，而不是Page 01 #FAIL#）

请注意，后退按钮是下面的一个（不是浏览器的实际按钮）：

在此处输入图像描述

另一方面，如果我取消注释我引用为问题的行，则单击后退按钮时，行为如预期：-> Page 02 -> Page 01直截了当。

似乎这个中间件系统不喜欢在调用: 之前调度一个动作next(action)。

关于如何以一种好的方式解决这种情况并在调用之前和之后继续记录操作的任何想法next(action)？

要求：使用中间件。

谢谢！

4

1 回答 1

-1

这个历史对象让我们手动控制浏览器的历史。由于 React Router 是根据当前 URL 更改我们看到的内容，因此历史对象可以让我们对应用程序的某些部分何时何地显示进行细粒度控制。

1-使用历史包创建历史对象：

2-基本用法如下所示：

import { createBrowserHistory } from 'history';

const history = createBrowserHistory();

// Get the current location.
const location = history.location;

// Listen for changes to the current location.
const unlisten = history.listen((location, action) => {
// location is an object like window.location
console.log(action, location.pathname, location.state);
});

// Use push, replace, and go to navigate around.
 history.push('/home', { some: 'state' });

// To stop listening, call the function returned from listen().
unlisten();

欲了解更多信息，请在此处输入链接描述

于 2019-12-16T05:45:42.680 回答