异步 redux 调用后 React 中的条件重定向

Question

我有相对简单的基于类的组件连接做redux-saga。它包含输入和按钮，当用户键入某些内容并按下按钮 saga 方法(异步方法(与该输入作为参数运行时。一段时间后，它会返回一些数据或错误。我想在该异步调用后有条件地将用户重定向到具有某些数据的不同页面或错误页面。

到目前为止，我设法编写了该组件的传奇和视觉部分，但我仍然在为重定向部分而苦苦挣扎。

我的意思是 redux 调用成功(redux 状态更改

正确(，我的问题是如何检测我的组件内的 redux 状态更改，然后重定向用户。我假设我必须使用一些生命周期方法，但同时我不想重新渲染它(毕竟在这两种情况下，成功的调用或错误，用户将被重定向到不同的页面(。

Answer 1

重定向到页面是基于路由器库的，如果使用react-router(版本 4(，您的配置应包含一些文件：

历史.js

import { createBrowserHistory } from "history";
export default createBrowserHistory();

在 App.js 文件(根组件(中，使用创建的历史记录而不是默认历史记录

import history from 'history' // history is a module comes with react-router
<Router history={history}>
    <Header />
    <Switch>
      <Route path="/" exact component={ComponentX} />
      <Route path="/Y" exact component={ComponentY} />
    </Switch>
</Router>

要在完成操作后重定向到另一个页面，您的操作函数将如下所示。就我而言，我使用 redux-thunk，一般的想法是，重定向代码是在完成您的 callAPI() asyn 函数之后出现的。

export const doSomething = values => async (dispatch, getState) => {
  const response = await callAPI();
  // Redirecting code
  if (response.error) history.push("/path/to/your/error/page");
  history.push("/path/to/your/showData/page");
};

旁注：重定向(导航(到应用中的路径。如果在组件内部，您可以使用react-router-dom Link组件，但是，在组件代码之外(以编程方式重定向(，您必须使用如上所述history。

在某些特定情况下，您需要在组件从应用程序状态收到新props后重定向，将componentDidUpdate与 history.push insde 一起使用以使其正常工作。